一.egg.js后台

具体的如何配置egg.js和新建项目我就不在这里啰嗦了，相关的文章非常多，或者去官网也能找到自己想要的。

直接步入正题。

新建一个egg项目，大概目录结构如下所示。

我们需要用到的大概就是controller,service,model,和router。没有的可以自己新建。

先连上mongo数据库。

在config里面的config.default配置以下内容。

url就是mongo数据库的地址，test是表的名字。

在config里面的plugin配置以下内容。

这样配置基本就可以连上了，不放心的可以测试一下。

// const mongoose = require('mongoose');

// mongoose.connect('mongodb://127.0.0.1:27017/test');

// const con = mongoose.connection;

// con.on('error', console.error.bind(console, '连接数据库失败'));

// con.once('open', () => {

//  console.log('连接成功');

// });

连上数据库可以说完成了前置工作。

现在开始编写接口代码。

在controller里面新建user.js

这只是简单的处理一下请求，具体的代码放在了service层里面，当然直接在controller里面写也可以。

进入到service层里面，找到user.js，上面的add()则对应service.user.add()函数。

model大概是指数据库吧，user是指表的名字，create是添加数据的方法，当然，user并不一定是和数据库的表的名字一致，具体是在model文件下配置。

在model下新建一个user.js

这里是设定了字段的一些属性，比如userName类型是string等，不符合就会报错。

最后return mongoose.model里面的User则是之前在service里面的User。

简单的业务逻辑已经编写好了，接下来配置路由。

打开router.js，这是自动生成的，不用新建。

router.post('/user/add', controller.user.add);

这些完成了，其实后台的工作就基本结束了。接下来就是前段调用接口的事情了。

二.vue.js前台

同样的，如何生成vue项目我也不说了，相关教程非常多。

新建一个vue项目。

配置一下config里面的dev.env.js和prod.env.js

这里BASE_API不是mongo数据库的地址，是你后台的地址，在你用egg.js便血丸代码使用npm run dev运行的时候给的地址。

然后需要在src目录下新建一个utils和一个store文件夹。

在utils下面新建一个request.js，这是拦截器。

具体代码如下。

import axios from 'axios'

// import { Message, MessageBox } from 'element-ui'

import store from '../store'

// import { getToken } from '@/utils/auth'

// 创建axios实例

const service = axios.create({

  baseURL: process.env.BASE_API, // api 的 base_url

  timeout: 5000 // 请求超时时间

})

// request拦截器

service.interceptors.request.use(

  config => {

//    if (store.getters.token) {

//      config.headers['authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

//    }

    console.log('config', config)

    return config

  },

  error => {

    // Do something with request error

    console.log(error) // for debug

    Promise.reject(error)

  }

)

// response 拦截器

service.interceptors.response.use(

  response => {

    /**

    * code为非20000是抛错 可结合自己业务进行修改

    */

    if (response.status !== 200) {

      return Promise.reject('error')

    } else {

      console.log('response111111', response.data)

      return response.data

    }

  },

  error => {

    console.log('err' + error) // for debug

    // Message({

    //  message: error.message,

    //  type: 'error',

    //  duration: 5 * 1000

    // })

    // return Promise.reject(error)

  }

)

export default service

其中注释的部分是登录时会用到，现在只是单纯的写添加接口不需要。

然后store下面的index.js里面代码如下。

其中vuex和axios需自行下载依赖，以后写登录会用到。

现在基本配置完成，可以开始编写代码。

简单的写两个输入框和按钮。

接下来就是要写接口了。

在api文件夹下面新建user.js

引入request。

import request from '@/utils/request'

这就是添加接口，将userName和age传给后端，url就是之前后端的router里写的路径。

回到页面上。

在script标签下引入接口。

在methods写提交按钮的submit方法

将前面绑定的userName和age传给后端。

后台打印一下数据。

这个打印用了查询方法，和前面添加方法大同小异，没有写查询方法的可以去数据库里看，不出意外的话应该生成了这条数据。

其他方法和这个差不多，本人也是新手，要是写的不好还请多多包涵。