一.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類型是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)多多包涵摊趾。
