1.首先搭建vue我的项目
npm install -g @vue/cli2.新建一个文件夹http_serve ，我的目录构造
1）index.js文件
const express = require('express')const app = express()const apiRouter = 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("Listen port:8080...")});2) db.js 连贯mongodb
let mongoose = require('mongoose');var User = require('../serve_scheam/user') // * 连贯mongoose.connect('mongodb://localhost/News', { useNewUrlParser: true});// * 连贯胜利mongoose.connection.on('connected', function() { console.log('Mongoose connection succuss');});// * 连贯异样mongoose.connection.on('error', function(err) { console.log('Mongoose connection error: ' + err);});// * 连贯断开mongoose.connection.on('disconnected', function() { console.log('Mongoose connection disconnected');});module.exports = mongoose;3) router.js 具体每个接口须要做什么操作(增删改查)
// 解决数据库中的各个汇合的表const express = require('express')const app = express()const bodyParser = require('body-parser')// const app = require('express').express()var News = require('../serve_scheam/newsList')var User = require('../serve_scheam/user')app.use(bodyParser.urlencoded({ extended: true //如果为false的话 就容易呈现 body: [Object: null prototype] {.. },}));app.use(bodyParser.json()) //解析json类型的申请体var resultObj = { code: 200, data: 'success'}console.log('======================> 开始解决路由router');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); let news = new News({ title: req.body.title ? req.body.title : '未知题目', content: req.body.content ? req.body.content : '未知内容', author: 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文件
const mongooes = require('../serve_setting/db')require('../serve_setting/db');var monSchema = require('mongoose')var Schema = monSchema.Schema;var newsSchema = new Schema({ title: String, content: String, author: String})module.exports = monSchema.model('News', newsSchema)user文件
// goods.js// var mongoose = require('mongoose');var mongoose = require('../serve_setting/db');var monSchema = require('mongoose')var Schema = monSchema.Schema;// 定义一个Schemavar userSchema = new Schema({ 'userName': String, // 或者 'productId':{type:String} 'passWord': String})// 输入(导出)module.exports = monSchema.model('User', userSchema); // 定义一个good商品模型，能够依据这个商品模型调用其API办法。// 这个模型定义的是数据库dumall的goods汇合数据，所以这个model取名good是对应这个汇合，连贯数据库之后，这个模型会依据名字的复数模式"goods"来查找数据汇合。// module.exports = mongoose.model('good',produtSchema,'goods'); 也能够前面注明链接的是数据库的goods汇合下面就是咱们服务端的，如果想启动node服务，我是在package.json文件中增加"index": "node http_serve/serve_setting/index.js"
npm run index 即可开启
上面是vue 页面，首先对axios的二次封装 ， 为了不便保护接口的对立解决， 以及代理跨域（因为vue 开启的服务端口号是8081 ，而node开启的是8080，所以我就在本地代理了）
3.新建http文件夹 ，httpConfig文件
import axios from 'axios'import qs from 'qs'// import router from '../router'/** * 封装axios的通用申请 * @param {string} method get\post\put\delete * @param {string} url 申请的接口URL * @param {object} param 传的参数，没有则传空对象 */// let access_token = localStorage.getItem('access_token') ? localStorage.getItem('access_token') : 'sdsdsdsdsdsd'axios.interceptors.request.use(config => { return config}, error => { return Promise.reject(error)})axios.interceptors.response.use(response => { return response}, error => { return Promise.resolve(error.response)})function http(url, param, Methods) { console.log(url, param, Methods); let method if (Methods) { method = Methods } else { method = 'post' } param = param && typeof param === 'object' ? param : {} const config = { url: url, method: method, transformRequest: [function(param) { return qs.stringify(param) }], headers: { 'X-Requested-With': 'XMLHttpRequest' } } // console.log("http__param==",param); // post申请时须要设定Content-Type if (method === 'post') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; config.data = param } else if (method === 'get') { config.params = param } return axios(config)}// export {// http// }export default http2) 在apiSetting文件中
import http from './httpConfig'export default { getUserList(data) { return http( '/User/getList', data, 'get', ) }, addNews(data) { return http( '/News/addNews', data, 'post', ) }}3) 跨域代理 在vue的根目录中新建一个vue.congfig.js文件夹
// vue.config.jslet baseUrl = 'http://localhost:8080/'console.log('====================================vue_config');module.exports = { devServer: { open: true, // 配置主动启动浏览器 disableHostCheck: true, // 配置代理 proxy: { "/User": { target: 'http://localhost:8080/User', // 想要拜访接口域名 changeOrigin: true, // 开启跨域,在本地创立一个虚构服务,而后发送申请的数据,并同时接管申请的数据,这样服务端和服务端进行数据交互就不会有问题 pathRewrite: { "^/User": '', // 利用这个高空的值拼接上target外面的地址 }, emulateJSON: true }, "/News": { target: 'http://localhost:8080/News', changeOrigin: true, pathRewrite: { "^/News": '', }, emulateJSON: true }, } }}4.页面申请的时候
<template> <div> getNewsList <h1 @click="addNews">增加文章</h1> </div></template><script>import listApi from '../http/apiSetting'export default { data () { return { list: [], params: { num: 3 } } }, mounted () { this.getList() }, methods: { getList () { listApi.getUserList(this.params).then((res) => { console.log(res.data); }).catch((err) => { console.log(err); }) }, addNews () { listApi.addNews({ title: '再别康桥', content: '轻轻是分离的笙箫；夏虫也为我缄默，缄默是今晚的康桥！', author: '徐志摩' }).then((res) => { console.log(res.data); }).catch((err) => { console.log(err); }) } }}</script><style></style>这样就完了
开启服务: npm run index
运行： npm run serve