├── static └── .gitkeep ├── img ├── koa-vue1.png ├── koa-vue2.png ├── koa-vue3.png └── koa-vue4.png ├── src ├── assets │ └── logo.png ├── App.vue ├── router │ └── index.js ├── main.js ├── utils │ └── index.js ├── components │ └── HelloWorld.vue └── pages │ ├── Login.vue │ └── List.vue ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── index.html ├── .babelrc ├── server ├── mysql │ ├── list.js │ └── error.js ├── config │ └── db.js ├── package.json ├── controller │ ├── error.js │ ├── login.js │ └── list.js ├── routes │ └── list.js ├── app.js └── model │ ├── list.js │ └── error.js ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/koa-vue1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galan99/koa-vue/HEAD/img/koa-vue1.png -------------------------------------------------------------------------------- /img/koa-vue2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galan99/koa-vue/HEAD/img/koa-vue2.png -------------------------------------------------------------------------------- /img/koa-vue3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galan99/koa-vue/HEAD/img/koa-vue3.png -------------------------------------------------------------------------------- /img/koa-vue4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galan99/koa-vue/HEAD/img/koa-vue4.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/galan99/koa-vue/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-koa 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": [ 12 | "transform-vue-jsx", 13 | "transform-runtime", 14 | ["component", 15 | { 16 | "libraryName": "element-ui", 17 | "styleLibraryName": "theme-chalk" 18 | }] 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /server/mysql/list.js: -------------------------------------------------------------------------------- 1 | //列表 2 | module.exports = function(sequelize, DataTypes){ 3 | return sequelize.define('lists', { 4 | user_id: { 5 | type: DataTypes.INTEGER(11), 6 | allowNull: true 7 | }, 8 | content: { 9 | type: DataTypes.CHAR(255), 10 | allowNull: true 11 | }, 12 | status: { 13 | type: DataTypes.INTEGER(1), 14 | allowNull: true 15 | } 16 | },{ 17 | timestamps: false 18 | }); 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 30 | -------------------------------------------------------------------------------- /server/mysql/error.js: -------------------------------------------------------------------------------- 1 | //列表 表名要加s 2 | module.exports = function(sequelize, DataTypes){ 3 | return sequelize.define('errorlogs', { 4 | err: { 5 | type: DataTypes.CHAR(255), 6 | allowNull: true 7 | }, 8 | type: { 9 | type: DataTypes.CHAR(255), 10 | allowNull: true 11 | }, 12 | ua: { 13 | type: DataTypes.CHAR(255), 14 | allowNull: true 15 | } 16 | },{ 17 | timestamps: false 18 | }); 19 | } -------------------------------------------------------------------------------- /server/config/db.js: -------------------------------------------------------------------------------- 1 | // db.js 2 | const Sequelize = require('sequelize'); // 引入sequelize 3 | 4 | // 使用url连接的形式进行连接，注意将root: 后面的XXXX改成自己数据库的密码 5 | //mysql://root:123456@localhost/todolist 6 | const Todolist = new Sequelize('todolist', 'root', '123456', { 7 | host: '127.0.0.1', 8 | port: 3306, 9 | dialect: 'mysql', 10 | logging: false, 11 | freezeTableName: true, 12 | operatorsAliases: false, 13 | pool:{ 14 | max:5, 15 | min:0, 16 | idle:10000 17 | } 18 | }) 19 | 20 | 21 | module.exports = { 22 | Todolist // 将Todolist暴露出接口方便Model调用 23 | } -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-koa-server", 3 | "version": "1.0.0", 4 | "description": "koa服务端代码", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "koa", 11 | "mysql" 12 | ], 13 | "author": "galan99", 14 | "license": "ISC", 15 | "dependencies": { 16 | "koa": "^2.5.1", 17 | "koa-bodyparser": "^4.2.1", 18 | "koa-router": "^7.4.0", 19 | "koa-static": "^5.0.0", 20 | "mysql": "^2.15.0", 21 | "mysql2": "^1.5.3", 22 | "sequelize": "^4.38.0" 23 | }, 24 | "devDependencies": { 25 | "request": "^2.88.0", 26 | "source-map": "^0.7.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /server/controller/error.js: -------------------------------------------------------------------------------- 1 | const listModel = require('../model/error.js'); 2 | 3 | const addList = async function(ctx){ 4 | const data = ctx.query; 5 | //const data = ctx.request.body; //post koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中 6 | const result = await listModel.addList(data); 7 | ctx.body = { 8 | code: result ? 0 : -1, 9 | msg: result ? '添加成功！' : '请求过快，请稍后再试！' 10 | } 11 | } 12 | 13 | const pageList = async function(ctx){ 14 | const data = ctx.query;//get 获取url里传过来的参数 15 | const result = await listModel.getList(data); 16 | ctx.body = { 17 | code: 0, 18 | msg: 'success', 19 | data: result 20 | } 21 | } 22 | 23 | module.exports = { 24 | pageList, 25 | addList, 26 | } -------------------------------------------------------------------------------- /server/routes/list.js: -------------------------------------------------------------------------------- 1 | 2 | const list = require('../controller/list.js'); 3 | const login = require('../controller/login.js'); 4 | const error = require('../controller/error.js'); 5 | const router = require('koa-router')(); 6 | 7 | router.post('/list/add', list.addList);//添加记录 8 | router.post('/list/remove', list.removeList);//删除记录 9 | router.post('/list/update', list.updateList);//更新记录 10 | router.get('/list/get', list.getList);//获取记录 11 | router.get('/list/page', list.pageList);//获取记录分页 12 | 13 | router.post('/login', login.login);//登录 14 | 15 | 16 | router.get('/error/list', error.pageList); //获取记录日志分页 17 | router.get('/error/add', error.addList); //添加记录日志 18 | 19 | 20 | module.exports = router; // 把router规则暴露出去 -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | const appKoa = new require('koa') 2 | , koa = require('koa-router')() 3 | , path =require('path') 4 | , serve = require('koa-static') 5 | , list = require('./routes/list.js'); // 引入auth 6 | 7 | app = new appKoa(); 8 | 9 | 10 | // 静态文件serve在koa-router的其他规则之上 11 | app.use(serve(path.resolve('../dist'))); // 将webpack打包好的项目目录作为Koa静态文件服务的目录 12 | 13 | app.use(require('koa-bodyparser')()); 14 | 15 | app.on('error', function(err, ctx){ 16 | console.log('server error', err); 17 | }); 18 | 19 | koa.use('/api', list.routes()); // 挂载到koa-router上，同时会让所有的list的请求路径前面加上'/list'的请求路径。 20 | 21 | app.use(koa.routes()); // 将路由规则挂载到Koa上。 22 | 23 | app.listen(3000,() => { 24 | console.log('Koa is listening in 3000'); 25 | }); 26 | 27 | module.exports = app; -------------------------------------------------------------------------------- /server/controller/login.js: -------------------------------------------------------------------------------- 1 | const login = async function(ctx){ 2 | const data = ctx.request.body;//post 3 | if(data.username != 'admin'){ 4 | ctx.body = { 5 | code: 1, 6 | msg: '账号不正确！' 7 | } 8 | ctx.cookies.set('username','',{signed:false,maxAge:0}) 9 | return; 10 | } 11 | if(data.password != 123){ 12 | ctx.body = { 13 | code: 1, 14 | msg: '密码不正确！' 15 | } 16 | ctx.cookies.set('username','',{signed:false,maxAge:0}) 17 | return; 18 | } 19 | ctx.cookies.set( 20 | 'username', 21 | 'admin', 22 | { 23 | //domain: 'localhost', // 写cookie所在的域名 24 | //path: '/', // 写cookie所在的路径 25 | maxAge: 1 * 24 * 60 * 60 * 1000, // cookie有效时长 1天 26 | expires: new Date('2018-02-15'), // cookie失效时间 27 | httpOnly: false, // 是否只用于http请求中获取 28 | overwrite: false // 是否允许重写 29 | } 30 | ) 31 | ctx.body = { 32 | code: 0, 33 | msg: '登录成功！' 34 | } 35 | } 36 | 37 | module.exports = { 38 | login 39 | } -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | //import HelloWorld from '@/components/HelloWorld' 4 | 5 | Vue.use(Router) 6 | 7 | let router = new Router({ 8 | routes: [ 9 | { 10 | path: '/login', 11 | component: resolve => require(['../pages/Login.vue'], resolve) 12 | }, 13 | { 14 | path: '/list', 15 | component: resolve => require(['../pages/List.vue'], resolve) 16 | }, 17 | { 18 | path: '/', 19 | redirect: '/login' 20 | }, 21 | ] 22 | }) 23 | 24 | function getCookie(name){ 25 | var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 26 | if(arr != null){ 27 | return unescape(arr[2]); 28 | }else{ 29 | return null; 30 | } 31 | } 32 | 33 | router.beforeEach((to, from, next) => { 34 | const token = getCookie('username'); 35 | if (to.path === '/login') { // 如果是跳转到登录页的 36 | next() 37 | } else { 38 | if (token !== 'null' && token !== null) { 39 | next() // 如果有token就正常转向 40 | } else { 41 | next('/login') // 否则跳转回登录页 42 | } 43 | } 44 | }) 45 | 46 | export default router -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 技术栈 2 | 3 |
4 | 前端：vue2 + vue-route + webpack + ES6 + less + nginx 5 |
6 |
7 | 后端：koa2 + mysql 8 |
9 |
10 | 11 | 12 | ## 项目运行 13 | 14 | 源码地址: [https://github.com/galan99/koa-vue](https://github.com/galan99/koa-vue) 15 |
16 |
17 | 18 | > 前端开发 19 | 20 | ```code 21 | //安装依赖 22 | npm install 23 | 24 | //开发,跑在本地8080端口 25 | npm run dev 26 | 27 | //打包 28 | npm run build 29 | 30 | ``` 31 | 32 |
33 |
34 | 35 | 36 | > 后端开发 37 | 38 | 默认已本地安装mysql服务，如果没有安装mysql，请看[安装教程](http://www.runoob.com/mysql/mysql-install.html) 39 | 40 | ```code 41 | cd server 42 | # 进入sever目录 43 | 44 | # 安装依赖 45 | npm install 46 | 47 | # 执行node服务 48 | node app.js 49 | 50 | ``` 51 | 52 |
53 |
54 | 55 | ## 演示 56 | 57 | 58 | 59 | 60 | 61 | 62 | ## 我的联系方式 63 | 64 |
65 | 66 |
67 |
68 |
风里雨里我在这儿等你，欢迎勾搭！
69 | 70 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | import {Input, Button, Form, FormItem,Tabs,TabPane,Row,Col,Dialog,Message,Pagination} from 'element-ui'; 8 | Vue.use(Input) 9 | Vue.use(Button) 10 | Vue.use(Form) 11 | Vue.use(FormItem) 12 | Vue.use(Tabs) 13 | Vue.use(TabPane) 14 | Vue.use(Row) 15 | Vue.use(Col) 16 | Vue.use(Dialog) 17 | Vue.use(Pagination) 18 | Vue.prototype.$message = Message; 19 | 20 | Vue.config.productionTip = false 21 | 22 | /* 配置请求域名 */ 23 | let $url = ''; 24 | let $http = document.location.protocol + "//"; 25 | let $host = window.location.host; 26 | if (location.href.indexOf('//localhost') != -1 || location.href.indexOf('//192.168.116') != -1) { 27 | //本地接口地址 28 | $url = ''; 29 | } else if (location.href.indexOf('//192.168') != -1) { 30 | //测试接口地址 31 | $url = $http + $host + "/"; 32 | } else { 33 | // 线上接口地址 34 | $url = $http + $host + ""; 35 | } 36 | Vue.prototype.$url = $url; 37 | 38 | //import "babel-polyfill"; 39 | 40 | /* eslint-disable no-new */ 41 | new Vue({ 42 | el: '#app', 43 | router, 44 | components: { App }, 45 | template: '' 46 | }) 47 | -------------------------------------------------------------------------------- /server/controller/list.js: -------------------------------------------------------------------------------- 1 | const list = require('../model/list.js'); 2 | 3 | const getList = async function(ctx){ 4 | const data = ctx.params.id;//get 获取url里传过来的参数 5 | const result = await list.getList(); 6 | ctx.body = { 7 | code: 0, 8 | msg: 'success', 9 | data: result 10 | } 11 | } 12 | 13 | const removeList = async function(ctx){ 14 | const data = ctx.request.body//post koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中 15 | const result = await list.removeList(data); 16 | ctx.body = { 17 | code: 0, 18 | msg: '删除成功！' 19 | } 20 | } 21 | 22 | const addList = async function(ctx){ 23 | const data = ctx.request.body;//post 24 | const result = await list.addList(data); 25 | ctx.body = { 26 | code: 0, 27 | msg: '添加成功！' 28 | } 29 | } 30 | 31 | const updateList = async function(ctx){ 32 | const data = ctx.request.body;//post 33 | const result = await list.updateList(data); 34 | ctx.body = { 35 | code: 0, 36 | msg: '修改成功！' 37 | } 38 | } 39 | 40 | //返回列表页数 41 | const pageList = async function(ctx) { 42 | const data = ctx.query;//get 获取url里传过来的参数 43 | const result = await list.pageList(data); 44 | ctx.body = { 45 | code: 0, 46 | msg: 'success', 47 | data: { 48 | list: result.rows, 49 | count: result.count, 50 | totalPage: Math.ceil(result.count/data.pageSize) 51 | } 52 | } 53 | } 54 | 55 | module.exports = { 56 | getList, 57 | removeList, 58 | addList, 59 | updateList, 60 | pageList 61 | } -------------------------------------------------------------------------------- /server/model/list.js: -------------------------------------------------------------------------------- 1 | // models/user.js 2 | const db = require('../config/db.js'), 3 | listModel = '../mysql/list.js'; // 引入user的表结构 4 | const TodolistDb = db.Todolist; // 引入数据库 5 | 6 | const List = TodolistDb.import(listModel); // 用sequelize的import方法引入表结构，实例化了User。 7 | 8 | const getUserById = async function(id){ 9 | const userInfo = await List.findOne({ 10 | where: { 11 | id: id 12 | } 13 | }); 14 | return userInfo // 返回数据 15 | } 16 | 17 | //返回列表页数 18 | const pageList = async function(params) { 19 | //pageSize 每页10条数据 page 页数 20 | let {pageSize, page} = params; 21 | const list = await List.findAndCountAll({ 22 | limit: pageSize*1, 23 | offset: pageSize*(page - 1), 24 | }) 25 | return list 26 | } 27 | 28 | 29 | //返回列表 30 | const getList = async function(){ 31 | const list = await List.findAll(); 32 | return list 33 | } 34 | 35 | //删除一条 36 | const removeList = async function(data){ 37 | const result = await List.destroy({ 38 | where: { 39 | id: data.id, 40 | user_id: data.userId 41 | } 42 | }) 43 | return true 44 | } 45 | 46 | //创建一条 47 | const addList = async function(data){ 48 | const result = await List.create({ 49 | user_id: data.user_id, 50 | content: data.content, 51 | status:1, 52 | }) 53 | return true 54 | } 55 | 56 | //更新一条 57 | const updateList = async function(data){ 58 | const result = await List.update( 59 | { 60 | content:data.content 61 | }, 62 | { 63 | where: { 64 | id: data.id, 65 | user_id: data.userId 66 | } 67 | } 68 | ) 69 | return true 70 | } 71 | 72 | module.exports = { 73 | getList, 74 | removeList, 75 | addList, 76 | updateList, 77 | pageList 78 | } -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Qs from 'qs'; 3 | import axios from 'axios'; 4 | import { Message } from 'element-ui' 5 | import router from '../router' 6 | 7 | export let checkNumber = (rule, value, callback) => { 8 | if(!/^[0-9]*$/.test(value) || value==''){ 9 | return callback(new Error('请输入数字')); 10 | }else{ 11 | callback(); 12 | } 13 | }; 14 | 15 | 16 | export const Ajax= (...rest) => { 17 | 18 | function checkStatus(response) { 19 | if(response.data.code!=0 && response.data.msg){ 20 | if (response.data.code == 10003) { 21 | // 未登陆或登陆已失效 22 | router.push('/login'); 23 | } else { 24 | Message.error(response.data.msg); 25 | } 26 | } 27 | return response.data 28 | } 29 | 30 | function checkCode(res) { 31 | Message.error('请求出错，请稍后再试！'); 32 | return res 33 | } 34 | 35 | let data=rest[2]; 36 | let headers={'X-Requested-With': 'XMLHttpRequest'}; 37 | let json={}; 38 | 39 | if(rest[0].toLowerCase()=='post'){ 40 | data= rest.length == 3 ? Qs.stringify(data) : data; 41 | headers= { 42 | 'X-Requested-With': 'XMLHttpRequest', 43 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 44 | }; 45 | json.data=data; 46 | }else if(rest[0].toLowerCase()=='get'){ 47 | //data.t=new Date().getTime(); //去除get缓存 48 | json.params=data; 49 | }else{ 50 | const config = { headers: { 'Content-Type': 'multipart/form-data' } }; 51 | return axios.post(rest[1], data, config).then(checkStatus).catch(checkCode); 52 | } 53 | 54 | json.method=rest[0]; // 请求方式 55 | json.url=rest[1]; // 请求的地址 56 | json.timeout= 80000; // 超时时间, 单位毫秒 57 | json.headers=headers; 58 | 59 | return axios(json).then(checkStatus).catch(checkCode); 60 | 61 | } 62 | 63 | /*使用方法 64 | async comeIn(){ 65 | let postData = { 66 | page: this.curPage, 67 | pageSize: this.pageSize, 68 | sort: this.sort, 69 | }; 70 | const data=await Ajax('get',`${this.$url}wpk/popups/list`,postData); 71 | if(data.code==0){ 72 | 73 | } 74 | } 75 | */ 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-koa", 3 | "version": "1.0.0", 4 | "description": "vue配合koa的项目", 5 | "author": "、", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "css-loader": "^0.28.11", 15 | "element-ui": "^2.4.3", 16 | "happypack": "^5.0.0", 17 | "less": "^3.5.3", 18 | "less-loader": "^4.1.0", 19 | "vue": "^2.5.2", 20 | "vue-router": "^3.0.1", 21 | "vue-style-loader": "^3.1.2", 22 | "webpack-parallel-uglify-plugin": "^1.1.0" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^7.1.2", 26 | "babel-core": "^6.22.1", 27 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 28 | "babel-loader": "^7.1.1", 29 | "babel-plugin-component": "^1.1.1", 30 | "babel-plugin-syntax-jsx": "^6.18.0", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-plugin-transform-vue-jsx": "^3.5.0", 33 | "babel-preset-env": "^1.3.2", 34 | "babel-preset-stage-2": "^6.22.0", 35 | "chalk": "^2.0.1", 36 | "copy-webpack-plugin": "^4.0.1", 37 | "css-loader": "^0.28.0", 38 | "extract-text-webpack-plugin": "^3.0.0", 39 | "file-loader": "^1.1.4", 40 | "friendly-errors-webpack-plugin": "^1.6.1", 41 | "html-webpack-plugin": "^2.30.1", 42 | "node-notifier": "^5.1.2", 43 | "optimize-css-assets-webpack-plugin": "^3.2.0", 44 | "ora": "^1.2.0", 45 | "portfinder": "^1.0.13", 46 | "postcss-import": "^11.0.0", 47 | "postcss-loader": "^2.0.8", 48 | "postcss-url": "^7.2.1", 49 | "rimraf": "^2.6.0", 50 | "semver": "^5.3.0", 51 | "shelljs": "^0.7.6", 52 | "uglifyjs-webpack-plugin": "^1.1.1", 53 | "url-loader": "^0.5.8", 54 | "vue-loader": "^13.3.0", 55 | "vue-style-loader": "^3.0.1", 56 | "vue-template-compiler": "^2.5.2", 57 | "webpack": "^3.6.0", 58 | "webpack-bundle-analyzer": "^2.9.0", 59 | "webpack-dev-server": ">=3.1.11", 60 | "webpack-merge": "^4.1.0" 61 | }, 62 | "engines": { 63 | "node": ">= 6.0.0", 64 | "npm": ">= 3.0.0" 65 | }, 66 | "browserslist": [ 67 | "> 1%", 68 | "last 2 versions", 69 | "not ie <= 8" 70 | ] 71 | } 72 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /server/model/error.js: -------------------------------------------------------------------------------- 1 | // models/user.js 2 | const request = require('request'); 3 | const sourceMap = require('source-map'); 4 | 5 | const db = require('../config/db.js'), 6 | listModel = '../mysql/error.js'; // 引入user的表结构 7 | const TodolistDb = db.Todolist; // 引入数据库 8 | 9 | const List = TodolistDb.import(listModel); // 用sequelize的import方法引入表结构，实例化了User。 10 | 11 | 12 | //返回列表页数 13 | const getList = async function(params) { 14 | //pageSize 每页10条数据 page 页数 15 | let {pageSize, page, type} = params; 16 | let findJson = {}; 17 | if(type){ 18 | findJson.type = type; 19 | } 20 | const list = await List.findAndCountAll({ 21 | where: findJson, 22 | limit: pageSize*1, 23 | offset: pageSize*(page - 1), 24 | }) 25 | return list 26 | } 27 | 28 | 29 | 30 | //读取map文件 31 | function showMap(url, info){ 32 | //const fs = require('fs'); 33 | //let fileUrl = './main.js.map'; // 本地map文件路径 34 | //var rawSourceMapJsonData = fs.readFileSync(fileUrl, 'utf-8').toString(); 35 | //var consumer = await new sourceMap.SourceMapConsumer(rawSourceMapJsonData); 36 | //console.log(consumer.originalPositionFor({line: 1, column:2363})) 37 | 38 | return new Promise(function (resolve, reject) { 39 | request.get(url, async function (error, response, body) { 40 | if (!error && response.statusCode == 200) { 41 | var consumer = await new sourceMap.SourceMapConsumer(body); 42 | resolve(consumer.originalPositionFor({line: info.line, column: info.column})) 43 | }else { 44 | reject(error) 45 | } 46 | }); 47 | }) 48 | } 49 | 50 | //创建一条数据 51 | let timeNow = 0; 52 | let sameErr = ''; 53 | const addList = async function(data){ 54 | let {err, type, ua, mapUrl} = data; 55 | if(mapUrl && mapUrl.indexOf('js.map') != -1 ){ 56 | let errorInfo = JSON.parse(err); //解析错误信息 57 | const mapResult = await showMap(mapUrl, {line: errorInfo.lineNo, column:errorInfo.columnNo}); 58 | 59 | // 将异常上报至后台 60 | err = JSON.stringify({ 61 | errorMessage: errorInfo.errorMessage, // 报错信息 62 | source: mapResult.source, // 报错文件路径 63 | line: mapResult.line, // 报错文件行号 64 | column: mapResult.column, // 报错文件列号 65 | stack: errorInfo.stack // 报错堆栈 66 | }) 67 | 68 | } 69 | 70 | if(new Date().getTime() - timeNow < 1e3 * 5){ 71 | //过滤重复请求 72 | return false; 73 | } 74 | 75 | if(err == sameErr){ 76 | //过滤重复请求 77 | return false; 78 | } 79 | 80 | //console.log('上次的时间' + timeNow + '，当前时间' + new Date().getTime()) 81 | 82 | if(!type || !err || !ua){ 83 | return false; 84 | } 85 | 86 | const result = await List.create({ 87 | type: type, 88 | err: err, 89 | ua: ua, 90 | }) 91 | timeNow = new Date().getTime(); 92 | sameErr = err; 93 | return true 94 | } 95 | 96 | module.exports = { 97 | addList, 98 | getList, 99 | } -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | var $url = 'http://localhost:3000'; //http://sb.gsd.gamdream.com,http://192.168.4.124:9990 8 | 9 | module.exports = { 10 | dev: { 11 | 12 | // Paths 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: '/', 15 | proxyTable: { 16 | '/api': { 17 | target: $url, 18 | changeOrigin: true, 19 | pathRewrite: { 20 | '^/api': '/api' 21 | } 22 | }, 23 | '/site': { 24 | target: $url, 25 | changeOrigin: true, 26 | pathRewrite: { 27 | '^/site': '/site' 28 | } 29 | }, 30 | }, 31 | 32 | // Various Dev Server settings 33 | host: 'localhost', // can be overwritten by process.env.HOST 34 | port: 8889, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 35 | autoOpenBrowser: true, 36 | errorOverlay: true, 37 | notifyOnErrors: true, 38 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 39 | 40 | 41 | /** 42 | * Source Maps 43 | */ 44 | 45 | // https://webpack.js.org/configuration/devtool/#development 46 | devtool: 'cheap-module-eval-source-map', 47 | 48 | // If you have problems debugging vue-files in devtools, 49 | // set this to false - it *may* help 50 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 51 | cacheBusting: true, 52 | 53 | cssSourceMap: false 54 | }, 55 | 56 | build: { 57 | // Template for index.html 58 | index: path.resolve(__dirname, '../dist/index.html'), 59 | 60 | // Paths 61 | assetsRoot: path.resolve(__dirname, '../dist'), 62 | assetsSubDirectory: 'static', 63 | assetsPublicPath: './', 64 | 65 | /** 66 | * Source Maps 67 | */ 68 | 69 | productionSourceMap: false, 70 | // https://webpack.js.org/configuration/devtool/#production 71 | devtool: '#source-map', 72 | 73 | // Gzip off by default as many popular static hosts such as 74 | // Surge or Netlify already gzip all static assets for you. 75 | // Before setting to `true`, make sure to: 76 | // npm install --save-dev compression-webpack-plugin 77 | productionGzip: false, 78 | productionGzipExtensions: ['js', 'css'], 79 | 80 | // Run the build command with an extra argument to 81 | // View the bundle analyzer report after build finishes: 82 | // `npm run build --report` 83 | // Set to `true` or `false` to always turn it on or off 84 | bundleAnalyzerReport: process.env.npm_config_report 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/pages/Login.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 65 | 66 | -------------------------------------------------------------------------------- /src/pages/List.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 200 | 201 | 229 | --------------------------------------------------------------------------------