实训一

1、安装 nodejs

进入 node 网站：https://nodejs.org/zh-cn/，下载nodejs

2、安装 git

进入 git 网站：https://git-scm.com/downloads，下载git

3、下载 vue-admin-template（前端）

建议

本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

基础模板：vue-admin-template

完成终端：school-manager-admin

4、开始创建项目

我所使用的开发软件是JetBrains WebStorm

①下载vue-admin-template

②进入vue-admin-template项目

③初始化vue-admin-template项目

④运行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项目

（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的内容为：

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 (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){//用户登录时每次请求将token放入请求头中

    // config.headers["token"] = user.state.token;

    // }

     if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {

//默认发application/json请求，如果application/x-www-form-urlencoded;需要使用transformRequest对参数进行处理 /*

            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.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中调用接口

添加部分为：

index.js

vue-admin-template/src/views/dashboard/index.vue：

6、安装koa-generator

①下载koa-generator：

npm install -g koa-generator

②构建koa2项目（搭建后端项目平台）：

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

③进入projectName项目

cd projectName

④初始化projectName项目

npm install

⑤运行projectName项目

npm run dev

成功的信息：

E:\nodejs\vue\vue-admin-template\projectName>npm run dev

> [email protected] 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/，若有出现以下界面则代表projectName项目搭建成功

或者可以使用基础模板：projectName

直接下载即可

7、安装本地mongodb或者在mongodb官网新建免费的云端服务器

数据库代码（这是我的数据库，若有建此项目时，需要换成自己的数据库）：

mongodb+srv://hxm1:@cluster0-h9ngn.azure.mongodb.net/sziit?retryWrites=true&w=majority

如何创建自己的数据库：

找到mongodb的官网，注册登录

登录成功的mangodb界面

选择connect，就会出现以下界面

选择Connect Your Application，就会出现以下界面

数据库链接

8、安装mongoose

npm install mongoose --save

9、编辑projectName项目

在projectName下创建db目录：

①在db下创建config.js

projectName/db/config.js：

module.exports = {

        // dbs: 'mongodb://139.159.253.110:27017/test1'

        dbs:'mongodb+srv://hxm1:@cluster0-h9ngn.azure.mongodb.net/sziit?retryWrites=true&w=majority'

}

此处需要修改为上面的数据库链接，还要将密码填写进去

②在db下创建models目录

在models创建user.js

projectName/db/models/user.js：

const mongoose = require('mongoose')

const feld={

        name: String, age: Number,

        //人物标签

        labels:Number

}

//自动添加更新时间创建时间:

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、重启项目

关闭正在运行的dev后，重新启动服务

npm run dev

如果出现了以下信息，则数据库连接成功

E:\nodejs\node.exe E:\nodejs\node_modules\npm\bin\npm-cli.js run dev --scripts-prepend-node-path=auto> [email protected] 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 连接成功

效果图：

前后端搭建成功