校园管理系统-部署环境，云端本地数据库相连

1.安装 nodejs

官网下载
npm install –g vue-cli
镜像下载
Npm config set registry https://registry.npm.taobao.org

2.新建文件夹在搜索栏输入cmd

3.输入
vue init webpack my-project
(一直下一步，除第一个yes，其他都no)

4.完成后输入
cd my-project

5.再输入运行
npm run dev

6.自动获得网址

2.安装 git

官网下载安装即可，一切都选择默认。

3.下载 vue-element-admin

1.打开你安装nodejs的文件夹，输入cmd打开命令提示符。输入下面的命令
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

加载成功界面，输入网址打开



启动成功界面


2.删除多余界面,用编辑器打开 vue-admin-template/src/router/index

删除后的界面如下

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
3.安装ES6语法插件
npm install --save es6-promise
4.加入Axios 插件

用编辑器新建一个js文件命名为http
存放在vue-admin-template/src/utils下
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;
5.配置axios代理：

打开vue-admin-template文件夹找到vue.config.js，向其中加入如下代码

 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']: ''
        }
      }
    },

替换位置为


6.打开vue-admin-template/src/main.js

加入http

import http from './utils/http'
Vue.use(http)
7.调用接口：

打开vue-admin-template\src\views\dashboard下的index
替换为如下代码
index.vue ↓

<template>
  <div class="dashboard-container">
    欢迎登录校园管理系统：
    <div class="dashboard-text">学校：{{schoolCount}}</div>
    <div class="dashboard-text">学院：{{academyCount}}</div>
     <div class="dashboard-text">班级：{{classsCount}}</div>
    <div class="dashboard-text">学生：{{studentCount}}</div>
    <div class="dashboard-text">老师：{{teacherCount}}</div>
    
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },

    data() {
      return {
        studentCount:'',
        schoolCount:'',
        teacherCount:'',
        academyCount:'',
        classsCount:''
      }
    },

    mounted(){
      this.$http.post('/api/school/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.schoolCount = res.length
      })
      this.$http.post('/api/student/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.studentCount = res.length
      })
      this.$http.post('/api/classs/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.classsCount = res.length
      })
      this.$http.post('/api/teacher/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.teacherCount = res.length
      })
      this.$http.post('/api/academy/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.academyCount = res.length
      })
    }



  }

</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
8.打开命令提示符：

全局安装koa-generator,执行下面命令

npm install -g koa-generator

构建koa2项目代码如下

koa2 projectName

构建成功界面



初始化后台项目插件，命令属下:

cd projectName

初始化项目，如果没有安装git工具会报错.

npm install

项目试运行

npm run dev

界面成功


在浏览器打开地址：
http://localhost:3000/
出现koa2的欢迎界面就代表成功

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

云端建立集群步骤

（这里引用熊薪老师的步骤
链接：https://www.jianshu.com/p/e3ce106ede47）：

5.本地配置mongodb

打开projectName输入cmd打开命令提示符
安装mongoose

npm install mongoose-save

在projectName中创建db目录，db下创建models
新建两个JS文件将config.js放入db，user.js 放入models
代码如下：
config.js ↓

module.exports = {
    // dbs: 'mongodb://139.159.253.110:27017/test1'
    dbs: 'mongodb+srv://xxwozixin:<需要修改>@cluster0-7d5kk.mongodb.net/test?retryWrites=true&w=majority'
}

注意此处要换成自己建立的用户名和数据库名（可去云端查看）

image.png

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)

修改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 index = require('./routes/index')
const users = require('./routes/users')


const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs, {useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('mongoose 连接成功')
});
// error handler
onerror(app)

// middlewares
app.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'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

// error handler
onerror(app)

// middlewares
app.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'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

修改projectName\router下的users.js
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/bar 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

打开projectName输入cmd打开命令提示符
重启项目
注意先关掉前面我们启动的服务再运行

npm run dev

结果成功界面


image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容