用【mysql,vue,node】制作一个前后端分离小项目

mysql vue.js javascript 2023-08-21 09:08:38 759人浏览安东尼

摘要

文章目录自制全栈项目1.准备技术1.1mysql1.2 node的express框架1.3vue相关的技术1.4怎么使用element-ui展示数据1.5利用axiso接收从服务器传来的数据 2.项目开始2.1需要搭建的前端

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【前端项目】

自制全栈项目

1.准备技术

1.1Mysql

根据基本的mysql语句，创建一个本地mysql的数据，
用于向前端页面展示。

在这里是我创建的一个db.sql文件

>CREATE TABLE `tbl_user` (  `tbl_id` int(4) NOT NULL AUTO_INCREMENT COMMENT '主键id',  `tbl_name` varchar(32) NOT NULL COMMENT '属性名称',  `tbl_age` int(4) NOT NULL COMMENT '年龄',  `tbl_sex` varchar(32)  NOT NULL DEFAULT 'man',  `tbl_eamil` varchar(32) NOT NULL COMMENT '邮箱',  `tbl_state` varchar(32)  NOT NULL DEFAULT 'man',  `tbl_show` varchar(32)  NOT NULL COMMENT '操作',    PRIMARY KEY (`tbl_id`)) ENGINE=InnoDB AUTO_INCREMENT=3803 DEFAULT CHARSET=utf8 COMMENT='属性表';INSERT INTO `tbl_user` VALUES('1','张三','18','男','3123131@qq.com','false','操作');INSERT INTO `tbl_user` VALUES('2','李四','23','女','31312432@qq.com','false','操作');INSERT INTO `tbl_user` VALUES('3','张大帅','34','女','32452345@qq.com','false','操作');INSERT INTO `tbl_user` VALUES('4','赵友情','32','男','24352334@qq.com','true','操作');INSERT INTO `tbl_user` VALUES('5','张璐','32','女','6456743565@qq.com','true','操作');INSERT INTO `tbl_user` VALUES('6','朴新凯','12','男','252345232@qq.com','true','操作');INSERT INTO `tbl_user` VALUES('7','李浩','42','女','234523452@qq.com','false','操作');INSERT INTO `tbl_user` VALUES('8','张易','33','女','12341234@qq.com','true','操作');INSERT INTO `tbl_user` VALUES('9','朴动议','22','男','12341234@qq.com','true','操作');INSERT INTO `tbl_user` VALUES('10','李使其','12','女','12341234@qq.com','false','操作');

关于怎么将该文件导入数据库
请参考:phpstudy导入mysql文件到数据库

1.2 node的express框架

学会用于express搭建一个服务器，封装mysql
操作语句并向前端发送数据并处理前端
发送的信息

在这个后端服务器主要有几大模块
1.2.1.创建接口
1.2.2创建连接mysql的文件
1.2.3编写mysql语句

1.3Vue相关的技术

搭建vue项目，学会怎么引入模块，
怎么使用vue-router的使用，怎么
将方法挂在在全局

1.4怎么使用element-ui展示数据

1.5利用axiso接收从服务器传来的数据

2.项目开始

展示项目：

全栈小项目1

2.1需要搭建的前端界面

在这里插入图片描述

2.2搭建前端代码

2.2.1用vue创建项目

npm i @vue/cli
vue create projectName(你项目的名称)

2.2.2下载响应的包

npm i axiOS -S
npm i vue-router -S(可能版本有问题，可降低版本)
npm i element-ui -S

2.2.3搭建vue项目基本架构

在components创建homeItem.vue组件用于展示数据
导入到router的index文件中形成路由

在router下创建index.js用于映射路由
在这里插入图片描述
index.js的代码为

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Home from '../components/HomeiTEM.vue'const route=new VueRouter({    routes:[        //将初始路径改为home        {            path:'/',            redirect:'/home'        },        //映射home组件，到home路径        {            path:'/home',            component:Home,        }    ]})export default route

之后在main.js中应用配置好的路由，
并引入相关的包，并完成相关全局配置

import Vue from 'vue'import App from './App.vue'import router from './router/index'//引入element-ui与相关的样式import '../node_modules/element-ui/lib/theme-chalk/index.CSS'import elementui from 'element-ui'import './css/index.css'//导入axiosimport axios from 'axios'//导入element-ui需要的组件，消息提示import {Message,MessageBox} from 'element-ui'//将消息提示框挂载到全局，便于在vue项目中任何地方引用Vue.prototype.$message=MessageVue.prototype.$confirm=MessageBox.confirmVue.config.productionTip = false//使用element-uiVue.use(elementui)//设置请求的基本地址axios.defaults.baseURL='Http://127.0.0.1:3000/'//将axios挂载到全局，便于在vue项目中任何地方引用Vue.prototype.$http=axiosnew Vue({  render: h => h(App),  router}).$mount('#app')

2.2.4设置homeItem

在这个项目中是一个上，中，下，侧边的布局
在element官网的容器查看使用方法。
我们主要配置中心区域，
需要用到的组件是
el-container el-button，
el-table，el-switch el-dialog

<el-main>     <div class="titleItem">练习增删改查</div>     <el-button type="primary" @click="dialogVisible=true">添加用户</el-button>        <!--展示数据区域-->        <el-table          :data="tableList"           style="width: 100%">         <!--展示数据姓名行区域-->         <el-table-column           prop="tbl_name"           label="姓名" >      </el-table-column>            </el-table>          </el-main>

基本架构，完整代码我会在我的资源中展示

2.3搭建后端代码

2.3.1 用express创建项目

npm i express -S
express create projectName(后端项目的名称)

2.3.2连接mysql文件

在项目的db目录向创建index.js

const mysql=require('mysql')var coon=mysql.createConnection({    host:'localhost',    user:'root',    passWord:'123456'//数据库密码    database:'user_table'//需要连接数据库的名称})coon.connect(()=>{    console.log('数据库连接成功')})module.exports=coon//暴露用于后续进行mysql操作。

2.3.3搭建后台服务器代码

在router的index,js中创建接口代码

var express = require('express');var router = express.Router();//导入连接mysql的函数，用于后于的mysql操作const coon = require('../db/index')router.get('/', function (req, res, next) {  res.render('index', { title: 'Express' });});//得到mysql数据库内的数据router.get('/datas', (req, res, next) => {  coon.query('select*from tbl_user', (err, data) => {    if (err) res.send({ status: 400, message: '请求失败' })    res.send({ status: 200, message: '请求数据成功', data: data })  })})//添加用户router.post('/adduser', (req, res, next) => {  const parms = req.body  //将数据导入mysql数据库的语句    coon.query(`INSERT INTO tbl_user(tbl_id, tbl_name, tbl_age, tbl_sex, tbl_eamil, tbl_state, tbl_show)   VALUES('${parms.tbl_id}','${parms.tbl_name}','${parms.tbl_age}','${parms.tbl_sex}','${parms.tbl_eamil}','${parms.tbl_state}','${parms.tbl_show}')`, (err, data) => {    if (err) {      res.send({ code: 1,status: 300, message: "增添数据失败" })       return    }    res.send({ code: 0, status: 200, message: '添加数据成功', data: data })  })})//按照传入的id删除对应的一行数据router.delete('/deluser/:id', (req, res, next) => {  const parms = req.params  //删除指定id对应行数据的mysql数据库的语句  coon.query(`delete from tbl_user where tbl_user.tbl_id='${parms.id}'`, (err, data) => {    if (err){      res.send({ code: 1, message: "删除数据失败" })      return    }     res.send({ code: 1, status: 200, message: '删除数据成功', data: data })  })})module.exports = router;

2.3.4配置解决跨域代码

在这里我们利用cors来解决

在app.js中书写代码

//用于设置跨域问题cors策略var allowCrosDown=function(req,res,next){  res.header('Access-Control-Allow-Origin','*')  res.header('Access-Control-Allow-Methods','*')  res.header('Access-Control-Allow-Headers','*')  next()}app.use(allowCrosDown)