一.egg.js后臺(tái)
具體的如何配置egg.js和新建項(xiàng)目我就不在這里啰嗦了，相關(guān)的文章非常多，或者去官網(wǎng)也能找到自己想要的。
直接步入正題。
新建一個(gè)egg項(xiàng)目，大概目錄結(jié)構(gòu)如下所示。
我們需要用到的大概就是controller,service,model,和router。沒(méi)有的可以自己新建。
先連上mongo數(shù)據(jù)庫(kù)。
在config里面的config.default配置以下內(nèi)容。
url就是mongo數(shù)據(jù)庫(kù)的地址，test是表的名字。
在config里面的plugin配置以下內(nèi)容。
這樣配置基本就可以連上了，不放心的可以測(cè)試一下。
// const mongoose = require('mongoose');
// mongoose.connect('mongodb://127.0.0.1:27017/test');
// const con = mongoose.connection;
// con.on('error', console.error.bind(console, '連接數(shù)據(jù)庫(kù)失敗'));
// con.once('open', () => {
//? console.log('連接成功');
// });
連上數(shù)據(jù)庫(kù)可以說(shuō)完成了前置工作。
現(xiàn)在開(kāi)始編寫(xiě)接口代碼。
在controller里面新建user.js
這只是簡(jiǎn)單的處理一下請(qǐng)求，具體的代碼放在了service層里面，當(dāng)然直接在controller里面寫(xiě)也可以。
進(jìn)入到service層里面，找到user.js，上面的add()則對(duì)應(yīng)service.user.add()函數(shù)。
model大概是指數(shù)據(jù)庫(kù)吧，user是指表的名字，create是添加數(shù)據(jù)的方法，當(dāng)然，user并不一定是和數(shù)據(jù)庫(kù)的表的名字一致，具體是在model文件下配置。
在model下新建一個(gè)user.js
這里是設(shè)定了字段的一些屬性，比如userName類(lèi)型是string等，不符合就會(huì)報(bào)錯(cuò)。
最后return mongoose.model里面的User則是之前在service里面的User。
簡(jiǎn)單的業(yè)務(wù)邏輯已經(jīng)編寫(xiě)好了，接下來(lái)配置路由。
打開(kāi)router.js，這是自動(dòng)生成的，不用新建。
router.post('/user/add', controller.user.add);
這些完成了，其實(shí)后臺(tái)的工作就基本結(jié)束了。接下來(lái)就是前段調(diào)用接口的事情了。
二.vue.js前臺(tái)
同樣的，如何生成vue項(xiàng)目我也不說(shuō)了，相關(guān)教程非常多。
新建一個(gè)vue項(xiàng)目。
配置一下config里面的dev.env.js和prod.env.js
這里BASE_API不是mongo數(shù)據(jù)庫(kù)的地址，是你后臺(tái)的地址，在你用egg.js便血丸代碼使用npm run dev運(yùn)行的時(shí)候給的地址。
然后需要在src目錄下新建一個(gè)utils和一個(gè)store文件夾。
在utils下面新建一個(gè)request.js，這是攔截器。
具體代碼如下。
import axios from 'axios'
// import { Message, MessageBox } from 'element-ui'
import store from '../store'
// import { getToken } from '@/utils/auth'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
? baseURL: process.env.BASE_API, // api 的 base_url
? timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間
})
// request攔截器
service.interceptors.request.use(
? config => {
//? ? if (store.getters.token) {
//? ? ? config.headers['authorization'] = getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
//? ? }
? ? 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是拋錯(cuò) 可結(jié)合自己業(yè)務(wù)進(jìn)行修改
? ? */
? ? 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
其中注釋的部分是登錄時(shí)會(huì)用到，現(xiàn)在只是單純的寫(xiě)添加接口不需要。
然后store下面的index.js里面代碼如下。
其中vuex和axios需自行下載依賴，以后寫(xiě)登錄會(huì)用到。
現(xiàn)在基本配置完成，可以開(kāi)始編寫(xiě)代碼。
簡(jiǎn)單的寫(xiě)兩個(gè)輸入框和按鈕。
接下來(lái)就是要寫(xiě)接口了。
在api文件夾下面新建user.js
引入request。
import request from '@/utils/request'
這就是添加接口，將userName和age傳給后端，url就是之前后端的router里寫(xiě)的路徑。
回到頁(yè)面上。
在script標(biāo)簽下引入接口。
在methods寫(xiě)提交按鈕的submit方法
將前面綁定的userName和age傳給后端。
后臺(tái)打印一下數(shù)據(jù)。
這個(gè)打印用了查詢方法，和前面添加方法大同小異，沒(méi)有寫(xiě)查詢方法的可以去數(shù)據(jù)庫(kù)里看，不出意外的話應(yīng)該生成了這條數(shù)據(jù)。
其他方法和這個(gè)差不多，本人也是新手，要是寫(xiě)的不好還請(qǐng)多多包涵。
