创建目录为了方便项目管理，创建根目录，分为两部分，server和viewserver用于搭建express框架view用于搭建vue框架搭建express框架全局安装express脚手架并查看是否安装成功npminstallexpress-generator-g查看是否安装成功express--version在server文件夹下创建express项目express项目名目录结构bin目录下的www文件用于启动projectpublic目录用来存放静态文件router目录用来存放路由文件，对应的资源和imports路径问题view目录用来存放模板引擎文件app.js文件是整个项目的入口文件。安装依赖，启动项目npminstallnpmstart默认访问localhost:3000如果出现如下内容，则表示启动初始化成功。在脚手架中，router目录下有user.js，用来添加自己的接口内容router.get('/',function(req,res,next){res.send('respondwitharesource');});在根目录应用程序中。js，user.js的配置是varusersRouter=require('./routes/users');app.use('/users',usersRouter);此时在浏览器中访问routeusers，如果响应为resource说明脚手架搭建成功全局搭建vue框架安装脚手架npminstall-g@vue/cli查看是否安装成功vue-v在view文件夹下创建vue项目vue创建项目名目录结构assess目录用于存放静态文件components目录用于存放公共组件App.vue根组件main.js项目入口设置跨域express项目启动端口默认3000，所以跨域devServer需要在视图层的vue框架中设置：{host:'localhost',port:8000,proxy:{'/api':{target:'http://localhost:3000',changeOrigin:true,pathRewrite:{"/api":""}}},},启动项目npminstallnpmrunserveconnecttothedatabaseexpress在modules中新建文件夹projecttostoremodules在自定义设置文件的module文件夹新建handel.js封装数据处理模块//importmysqlvarmysql=require('mysql')//importmysql连接配置varconnection=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'testdata'});varuserData={//查询所有数据queryAll:function(req,res,next){letqueryAll='SELECT*FROMuserdata'connection.query(queryAll,function(err,result){if(result!=''){res.json({code:'200',msg:'全部找到成功',data:result})}else{res.json({code:'1',msg:'Operationfailed'})}})},}module.exports=index.jspackageinterfaceinuserDataroutes文件夹varexpress=require('express');varrouter=express.Router();//输入产生自封装连接varuser=require('../modules/handel')/*GETho我的页面。*/router.get('/',function(req,res,next){res.render('index',{title:'Express'});});router.get('/queryAll',function(req,res,next){user.queryAll(req,res,next)})module.exports=router;运行数据在vueaxios.get("/api/queryAll").then((res)=>{console.log("Getres",res);}).catch((err)=>{console.log("获取错误",err);});如果可以获取到数据，说明本地搭建的数据视图互操作接口调试成功完成案例express+vue搭建项目，完成data-testsql的增删改查
