【全栈初体验】Vue+Node+MySQL实现前后端分离开发

前言本demo为MVVM开发模式。我还用vue-cil3写了一个完整的系统demoVue项目。用vue-cil2创建的项目也可以实现，只是在配置代理服务器的时候有点区别。稍后将对这两个版本进行区分。数据库操作使用Navicat。数据库配置新建一个MySQL连接（参数可以自己配置，后面会用到）新建一个数据库新建一个数据表节点服务器目录结构如下：新建一个文件夹serverinitialization下打开命令窗口server文件夹下，进入命令行npminit-yutils/DBHelper.js-->里面有mysql连接配置，对应上面//databaseconnectionhelperconstmysql=require('mysql');classDBHelper{//getdatabaseconnectiongetConn(){letconn=mysql.createConnection({//数据库连接配置host:'127.0.0.1',port:'3306',user:'root',password:'',database:'test'//数据库名称}）;conn.connect();返回康恩；}}module.exports=DBHelper;sqlMap.js-->api调用的SQL语句//sql语句varsqlMap={user:{//添加用户add:'insertintouser(name,age)values(?,?)',//queryuserselect:'select*fromuserwherenamelike"%"?"%"'}}module.exports=sqlMap;api/userApi.js-->userapiconstexpress=require('表达'）;constrouter=express.Router();constDBHelper=require('../utils/DBHelper');constsql=require('../sqlMap');//添加用户router.post('/addUser',(req,res)=>{让sqlStr=sql.user.add;让params=req.body;让conn=newDBHelper().getConn();conn.query(sqlStr,[params.name,params.age],(err,result)=>{if(err){res.json(err);}else{res.json(result);}});conn.end();});//查询用户router.post('/selectUser',(req,res)=>{letsqlStr=sql.user.select;letparams=req.body;letconn=newDBHelper().getConn();conn.query(sqlStr,[params.name],(err,result)=>{if(err){res.json(err);}else{res.json(result)}});conn.end();});module.exports=router;index.js-->服务入口文件//节点后端服务consthttp=require('http');constbadyParser=require('body-parser');constexpress=require('express');constuserApi=require('./api/userApi');letapp=express();letserver=http.createServer(app);app.use(badyParser.json());app.use(badyParser.urlencoded({extended:false}));//后端api路由app.use('/api/user',userApi);//开始监听server.listen(8888,()=>{console.log('success!!port:8888')})使用命令行npminstall-Smysql安装mysql包，然后使用命令行nodeindex.js启动服务Vue前端文件使用命令行vuecreatevue-node-demo创建项目，vue-cil2创建项目。这不是这里的正式项目。直接在HelloWorld.vue中编辑：设置代理处理跨域不设置会报404错误，因为直接访问8888端口是访问不了的，而代理服务器需要在这里设置。vue-cli3创建的项目设置在根目录新建一个文件vue.config.jsmodule.exports={devServer:{proxy:{//设置代理'/api':{target:'http://127.0.0.1:8888',//请求的目标服务器接口changeOrigin:true,//会在本地创建一个虚拟服务器，然后同时发送和接收请求的数据，这样不会有数据交互服务器与服务器之间跨域问题pathRewrite:{//重写请求'^/api':'/api'//替换target中的请求地址，也就是请求地址时http:///127.0.0.1:8888/XXXXX可以直接写成/api。}}}}}vue-cli2创建的项目设置//path:config/index.jsproxyTable:{'/api':{target:'http://127.0.0.1:8888',changeOrigin:true,pathRewrite:{'^/api':'/api'}}}演示看效果（演示用，不做样式处理）：在命令行输入npmrunserve运行开发环境，输入npmrundev填写项目vue-cil2创建的信息，点击提交按钮，刷新数据库，可以看到数据已经写入数据库。输入关键字，查询结果成功呈现到上面的表单中。（前提是数据库中有这条数据）最后，demo已经上传到Githubvue项目实战，猫眼移动端，从0开始搭建一个完整的项目