1仰禽、安裝 nodejs
進(jìn)入 node 網(wǎng)站：https://nodejs.org/zh-cn/，下載nodejs
2追城、安裝 git
進(jìn)入 git 網(wǎng)站：https://git-scm.com/downloads汰现，下載git
3、下載 vue-admin-template（前端）
建議
本項(xiàng)目的定位是后臺(tái)集成方案掏觉，不太適合當(dāng)基礎(chǔ)模板來進(jìn)行二次開發(fā)。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能值漫，會(huì)造成不少的代碼冗余澳腹。如果你的項(xiàng)目不關(guān)注這方面的問題，也可以直接基于它進(jìn)行二次開發(fā)杨何。
基礎(chǔ)模板：vue-admin-template
完成終端：school-manager-admin
4酱塔、開始創(chuàng)建項(xiàng)目
我所使用的開發(fā)軟件是JetBrains WebStorm
①下載vue-admin-template
②進(jìn)入vue-admin-template項(xiàng)目
③初始化vue-admin-template項(xiàng)目
④運(yùn)行vue-admin-template
clone the project
git clone https://gitee.com/hxm1clover/vue-admin-template.git
enter the project directory
cd vue-admin-template
install dependency
npm install
develop
npm run dev??
5、編輯vue-admin-template項(xiàng)目
（1）找到vue-admin-template/src/router/index.js危虱，將以下代碼刪除
{
????path: '/example', component: Layout,? redirect: '/example/table', name: 'Example',meta: { title: 'Example', icon: 'example' },
????children: [ { path: 'table',name: 'Table',component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' }
????????},
????????{ path: 'tree',? name: 'Tree', component: () => import('@/views/tree/index'),meta: { title: 'Tree', icon: 'tree' }} ] },
{
????????path: '/form', component: Layout, children: [
????????????{ path: 'index',name: 'Form',component: () => import('@/views/form/index'),meta: { title: 'Form', icon: 'form' }? } ] },
{
????????path: '/nested', component: Layout, redirect: '/nested/menu1', name: 'Nested', meta: {
????????????????title: 'Nested', icon: 'nested'
????????????},
????????????children: [
????????????????{ path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu1' }, children:[
? ? ? ? ? ? ? ? ? ? ? ? ?{ path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu1-1' } },
????????????????????????????{ path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', meta: { title: 'Menu1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu1-2-1' } },
????????????????????????????{ path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu1-2-2' } } ] },
? ? ? ? ? ? ? ? ? ? ? ?{ path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu1-3' } } ] },
? ? ? ? ? ? ? ? ? ? ? ? ?{ path: 'menu2', component: () => import('@/views/nested/menu2/index'), meta: { title: 'menu2' } } ] }, { path: 'external-link', component: Layout, children: [
? ? ? ? ? ? ?{ path: 'https://panjiachen.github.io/vue-element-admin-site/#/', meta: { title: 'External Link', icon: 'link' } } ] },
則index.js的內(nèi)容為：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/** * Note: sub-menu only appear when route children.length >= 1 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * * hidden: true if set true, item will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu * if not set alwaysShow, when item has more than one children route, * it will becomes nested mode, otherwise not show the root menu * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb * name:'router-name' the name is used by <keep-alive> (must set!!!) * meta : { roles: ['admin','editor'] control the page roles (you can set multiple roles) title: 'title' the name show in sidebar and breadcrumb (recommend set) icon: 'svg-name' the icon show in the sidebar breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) activeMenu: '/example/list' if set path, the sidebar will highlight the path you set } */
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
????{
????????path: '/login', component: () => import('@/views/login/index'), hidden: true
????},
????{
????????path: '/404', component: () => import('@/views/404'), hidden: true
????},
????{
????????path: '/', component: Layout, redirect: '/dashboard', children: [{
????????????path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard'?}
? ????? ? ? }]
????},
????// 404 page must be placed at the end !!!
????????{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
????// mode: 'history', // require service support
????scrollBehavior: () => ({ y: 0 }), routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
????const newRouter = createRouter()
????router.matcher = newRouter.matcher // reset router
}
export default router
效果圖：
（2）安裝ES6語法插件
npm install --save es6-promise
（3）編寫Axios 插件
①在vue-admin-template/src/untils中添加http.js：
import Vue from 'vue';
import Axios from 'axios';
import {Promise} from 'es6-promise';
import {MessageBox, Message} from 'element-ui'
Axios.defaults.timeout = 30000; // 1分鐘
Axios.defaults.baseURL = '';
Axios.interceptors.request.use(function (config) {
????// Do something before request is sent
????//change method for get ???
?????/*if(process.env.NODE_ENV == 'development'){ config['method'] = 'GET'; ????console.log(config)
????}*/
????if (config['MSG']) {
????????// Vue.prototype.$showLoading(config['MSG']);
????} else {
????????// Vue.prototype.$showLoading();
????}
????// if(user.state.token){//用戶登錄時(shí)每次請(qǐng)求將token放入請(qǐng)求頭中
????// config.headers["token"] = user.state.token;
????// }
?????if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {
//默認(rèn)發(fā)application/json請(qǐng)求羊娃，如果application/x-www-form-urlencoded;需要使用transformRequest對(duì)參數(shù)進(jìn)行處理 /*
????????????config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/ config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
????????????config['transformRequest'] = function (obj) { var str = []; for (var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&") };
????}
//config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
????return config;
}, function (error) {
????// Do something with request error
????// Vue.$vux.loading.hide()
????return Promise.reject(error);
});
Axios.interceptors.response.use(
????response => { // Vue.$vux.loading.hide(); return response.data; },
????error => { // Vue.$vux.loading.hide(); if (error.response) { switch (error.response.status) { case 404: Message({ message: '' || 'Error', type: 'error', duration: 5 * 1000 })
????????????????????break;
????????????????default: Message({ message: '' || 'Error', type: 'error', duration: 5 * 1000 }) }
????????} else if (error instanceof Error) { console.error(error);
? ? ? ? ?} else { Message({ message: '' || 'Error', type: 'error', duration: 5 * 1000 }) }
?????return Promise.reject(error.response); });
export default Vue.prototype.$http = Axios;
②配置axios代理：
添加部分為：
修改完vue.config.js的代碼為：
vue-admin-template/vue.config.js：
'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')function resolve(dir) { return path.join(__dirname, dir)}const name = defaultSettings.title || 'vue Admin Template' // page title// If your port is set to 80,// use administrator privileges to execute the command line.// For example, Mac: sudo npm run// You can change the port by the following methods:// port = 9528 npm run dev OR npm run dev --port = 9528const port = process.env.port || process.env.npm_config_port || 9528 // dev port// All configuration item explanations can be find in https://cli.vuejs.org/config/module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, * then publicPath should be set to "/bar/". * In most cases please use '/' !!! * Detail: https://cli.vuejs.org/config/#publicpath */ publicPath: '/', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://127.0.0.1:${port}/mock`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } }, ['/api']: { target: `http://127.0.0.1:3000`, changeOrigin: true, pathRewrite: { ['^' + '/api']: '' } } }, after: require('./mock/mock-server.js') }, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src') } } }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() // set preserveWhitespace config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.compilerOptions.preserveWhitespace = true return options }) .end() config // https://webpack.js.org/configuration/devtool/#development .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map') ) config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') } ) }}
（4）在vue-admin-template/src/utils/main.js添加http的路由
import http from './utils/http'
Vue.use(http)?
（5）在dashboard中調(diào)用接口
添加部分為：
vue-admin-template/src/views/dashboard/index.vue：
<template> <div class="dashboard-container"> 歡迎 </div></template><script>import { mapGetters } from 'vuex'export default { name: 'Dashboard', computed: { ...mapGetters([ 'name' ]) }, mounted() { this.$http.get('/api/users/add').then(res =>{ console.log('this.panels',res) }) }}</script><style lang="scss" scoped>.dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; }}</style>
6、安裝koa-generator
①下載koa-generator：
npm install -g koa-generator
②構(gòu)建koa2項(xiàng)目（搭建后端項(xiàng)目平臺(tái)）：
koa2 projectName
成功的信息：
E:\nodejs\vue\vue-admin-template>koa2 projectName create : projectName create : projectName/package.json create : projectName/app.js create : projectName/public create : projectName/routes create : projectName/routes/index.js create : projectName/routes/users.js create : projectName/views create : projectName/views/index.pug create : projectName/views/layout.pug create : projectName/views/error.pug create : projectName/bin create : projectName/bin/www create : projectName/public/stylesheets create : projectName/public/stylesheets/style.css install dependencies: > cd projectName && npm install run the app: > SET DEBUG=koa* & npm start projectName create : projectName/public/javascripts create : projectName/public/images
③進(jìn)入projectName項(xiàng)目
cd projectName
④初始化projectName項(xiàng)目
npm install
⑤運(yùn)行projectName項(xiàng)目
npm run dev
成功的信息：
E:\nodejs\vue\vue-admin-template\projectName>npm run dev
> projectName@0.1.0 dev E:\nodejs\vue\vue-admin-template\projectName
> nodemon bin/www
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node bin/www`
[nodemon]starting `node bin/www`
在瀏覽器輸入http://localhoat:3000/埃跷，若有出現(xiàn)以下界面則代表projectName項(xiàng)目搭建成功
或者可以使用基礎(chǔ)模板：projectName
直接下載即可
7蕊玷、安裝本地mongodb或者在mongodb官網(wǎng)新建免費(fèi)的云端服務(wù)器
數(shù)據(jù)庫(kù)代碼（這是我的數(shù)據(jù)庫(kù)，若有建此項(xiàng)目時(shí)弥雹，需要換成自己的數(shù)據(jù)庫(kù)）：
mongodb+srv://hxm1:<password>@cluster0-h9ngn.azure.mongodb.net/sziit?retryWrites=true&w=majority
如何創(chuàng)建自己的數(shù)據(jù)庫(kù)：
找到mongodb的官網(wǎng)垃帅，注冊(cè)登錄
選擇connect，就會(huì)出現(xiàn)以下界面
選擇Connect Your Application剪勿，就會(huì)出現(xiàn)以下界面
數(shù)據(jù)庫(kù)鏈接
8贸诚、安裝mongoose
npm install mongoose --save
9、編輯projectName項(xiàng)目
在projectName下創(chuàng)建db目錄：
①在db下創(chuàng)建config.js
projectName/db/config.js：
module.exports = {
????????// dbs: 'mongodb://139.159.253.110:27017/test1'
????????dbs:'mongodb+srv://hxm1:<password>@cluster0-h9ngn.azure.mongodb.net/sziit?retryWrites=true&w=majority'
}
此處需要修改為上面的數(shù)據(jù)庫(kù)鏈接，還要將密碼填寫進(jìn)去
②在db下創(chuàng)建models目錄
在models創(chuàng)建user.js
projectName/db/models/user.js：
const mongoose = require('mongoose')
const feld={
????????name: String, age: Number,
????????//人物標(biāo)簽
????????labels:Number
}
//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})module.exports= mongoose.model('User',personSchema)
③修改app.js
添加部分為：
projectName/app.js：
const Koa = require('koa')const app = new Koa()const views = require('koa-views')const json = require('koa-json')const onerror = require('koa-onerror')const bodyparser = require('koa-bodyparser')const logger = require('koa-logger')const mongoose = require('mongoose')const dbconfig = require('./db/config')mongoose.connect(dbconfig.dbs,{useNewUrlParser: true,useUnifiedTopology: true})const db = mongoose.connectiondb.on('error',console.error.bind(console,'connection error:'));db.once('open',function () { console.log('mongoose 連接成功')});// error handleronerror(app)// middlewaresapp.use(bodyparser({ enableTypes:['json', 'form', 'text']}))app.use(json())app.use(logger())app.use(require('koa-static')(__dirname + '/public'))app.use(views(__dirname + '/views', { extension: 'pug'}))// loggerapp.use(async (ctx, next) => { const start = new Date() await next() const ms = new Date() - start console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})const index = require('./routes/index')app.use(index.routes(), index.allowedMethods())const users = require('./routes/users')app.use(users.routes(), users.allowedMethods())// error-handling// routesapp.on('error', (err, ctx) => { console.error('server error', err, ctx)});module.exports = app
④在users.js中添加user的路由
projectName/routes/users.js：
const router = require('koa-router')()const User = require('../db/models/user')router.prefix('/users')router.get('/add', function (ctx, next) { ctx.body = 'this is a users/add response'})router.get('/', function (ctx, next) { ctx.body = 'this is a users response!'})router.get('/bar', function (ctx, next) { ctx.body = 'this is a users/bar response'})module.exports = router
10酱固、重啟項(xiàng)目
關(guān)閉正在運(yùn)行的dev后二鳄，重新啟動(dòng)服務(wù)
npm run dev
如果出現(xiàn)了以下信息，則數(shù)據(jù)庫(kù)連接成功
E:\nodejs\node.exe E:\nodejs\node_modules\npm\bin\npm-cli.js run dev --scripts-prepend-node-path=auto> projectName@0.1.0 dev E:\nodejs\vue\projectName> nodemon bin/www[nodemon] 1.19.4[nodemon] to restart at any time, enter `rs`[nodemon] watching dir(s): *.*[nodemon] watching extensions: js,mjs,json[nodemon] starting `node bin/www`mongoose 連接成功
效果圖：
