1.首先构建vue项目npminstall-g@vue/cli2。新建文件夹http_serve，我的目录结构1）index.js文件constexpress=require('express')constapp=express()constapiRouter=require('./router')//处理接口数据请求app.use(apiRouter)require('./db')//app.get('*',function(req,res){//res.send('aaa')//})//app.use((req,res,next)=>{//console.log('==',req.url,req.method);//next();//})//允许跨域访问发现它可以写也可以不写，因为我配置了代理app.all('*',function(req,res,next){console.log('允许跨域')res.header("Access-Control-Allow-Origin","*");res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');res.header("Access-Control-Allow-Headers","X-Requested-With");res.header('Access-Control-Allow-Headers','Content-Type');next();});const{log}=require('console')app.listen(process.env.PORT||8080,function(){console.log("Listenport:8080...")});2)db.jsconnectmongodbletmongoose=require('mongoose');varUser=require('../serve_scheam/user')//*连接mongoose.connect('mongodb://localhost/News',{useNewUrlParser:true});//*连接成功mongoose.connection.on('connected',function(){console.log('Mongooseconnectionsuccuss');});//*连接异常mongoose.connection.on('error',function(err){console.log('Mongooseconnectionerror:'+err);});//*连接断开mongoose.connection.on('disconnected',function(){console.log('Mongooseconnectiondisconnected');});module.exports=mongoose;3)router.js具体每个接口需要做哪些操作（增删改查）//处理数据库中每个集合的表constexpress=require('express')constapp=express()constbodyParser=require('body-parser')//constapp=require('express').express()varNews=require('../serve_scheam/newsList')varUser=require('../serve_scheam/user')app.use(bodyParser.urlencoded({extended:true//如果为false，很容易appearbody:[Object:nullprototype]{..},}));app.use(bodyParser.json())//解析json类型的请求体varresultObj={code:200,data:'success'}安慰。日志（'=======================>开始处理路由');app.get('/User/getList',(req,res)=>{console.log('========>',req)//res.send('66666')//查找数据库User.find((err,data)=>{if(err){res.send(err);}else{res.send(data);}});})app.post('/News/addNews',(req,res)=>{console.log('post====>',req);letnews=newNews({title:req.body.title?req.body.title:'unknowntitle',content:req.body.content?req.body.content:'未知内容',作者:req.body.author?req.body.author:'匿名'});news.save((err,data)=>{if(err){res.send(err);}else{res.send(resultObj);}});})module.exports=app;5)接下来是serve_scheam文件夹下的newlist文件constmongooes=require('../serve_setting/db')require('../serve_setting/db');varmonSchema=require('猫鼬')varSchema=monSchema.Schema;varnewsSchema=newSchema({title:String,content:String,author:String})module.exports=monSchema.model('News',newsSchema)用户文件//goods.js//varmongoose=require('mongoose');varmongoose=require('../serve_setting/db');varmonSchema=require('mongoose')varSchema=monSchema.Schema;//定义一个SchemavaruserSchema=newSchema({'userName':String,//或'productId':{type:String}'passWord':String})//输出（导出）module.exports=monSchema.model('User',userSchema);//定义一个goodproductmodel，根据这个productmodel调用它的APIMethod//这个model定义了数据库dumall中goods的数据集合，所以模型good的名字对应这个集合。连接数据库后，模型会根据名称“goods”的复数形式搜索数据集合。//module.exports=mongoose.model('good',produtSchema,'goods');也可以指明链接是数据库的商品集合。上面是我们的服务器。如果要启动节点服务，我在包里。在json文件中添加“index”：“nodehttp_serve/serve_setting/index.js”npmrunindex打开下面的vue页面。首先对axios进行二次封装，为了方便维护接口统一处理，代理跨域（因为vue开启的服务端口号是8081，node开启的服务端口号是8080，所以我proxylocally)3.新建http文件夹，httpConfig文件importaxiosfrom'axios'importqsfrom'qs'//importrouterfrom'../router'/***封装了axios的通用请求*@param{string}methodget\pos??t\put\delete*@param{string}url请求接口URL*@param{object}parampassed如果没有参数，则传一个空对象*///letaccess_token=localStorage.getItem('访问令牌'）？localStorage.getItem('access_token'):'sdsdsdsdsdsd'axios.interceptors.request.use(config=>{returnconfig},error=>{returnPromise.reject(error)})axios.interceptors.response.use(response=>{returnresponse},error=>{returnPromise.resolve(error.response)})functionhttp(url,param,Methods){console.日志（你RL，参数，方法）；letmethodif(Methods){method=Methods}else{method='post'}param=param&&typeofparam==='object'吗？param:{}constconfig={url:url,method:method,transformRequest:[function(param){returnqs.stringify(param)}],headers:{'X-Requested-With':'XMLHttpRequest'}}//console.log("http__param==",param);//post请求时需要设置Content-Typeif(method==='post'){config.headers['Content-Type']='application/x-www-form-urlencoded;字符集=UTF-8'；config.data=param}elseif(method==='get'){config.params=param}returnaxios(config)}//export{//http//}exportdefaulthttp2)在apiSetting文件中importhttpfrom'./httpConfig'exportdefault{getUserList(data){returnhttp('/User/getList',data,'get',)},addNews(data){returnhttp('/News/addNews',data,'post',)}}3)跨域代理在vue根目录新建vue.congfig.js文件夹//vue.配置。jsletbaseUrl='http://localhost:8080/'console.log('=======================================vue_config');module.exports={devServer:{open:true,//配置自动启动浏览器disableHostCheck:true,//配置代理proxy:{"/User":{target:'http://localhost:8080/User',//想访问接口域名changeOrigin:true,//开启跨域，在本地创建一个虚拟服务，然后发送请求的数据，在本地接收请求的数据同时，让服务端和服务端的数据交互不会有问题true},"/News":{target:'http://localhost:8080/News',changeOrigin:true,pathRewrite:{"^/News":'',},emulateJSON:true},}}}4.当页面被请求时
