sakila1012 / vue-login-manage-system Goto Github PK

View Code? Open in Web Editor NEW

212.0 212.0 85.0 403 KB

基于Vue.js 2.x系列 + Element UI + Node.js + Mysql的后台管理系统解决方案

HTML 1.21% JavaScript 33.75% Vue 54.77% CSS 10.27%

vue-login-manage-system's Introduction

manage-system

基于Vue.js 2.x系列 + Element UI + Node.js + Mysql的后台管理系统解决方案。

准备工作

需在本地安装 Node.js

功能

目录结构介绍

|-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- src                              // 源码目录
├─service                            // 服务端
│   │-- app.js                       // express 入口文件
│   |-- api                          // 接口
│       │-- userApi.js               // 接口映射文件
│   |-- db                           // 数据库
│       |-- db.js                    // 连接数据库
│       |-- sqlMap.js                // 数据库映射文件
|   |-- components                   // 组件
|       |-- common                   // 公共组件
|           |-- Header.vue           // 公共头部
|           |-- Home.vue           	 // 公共路由入口
|           |-- Sidebar.vue          // 公共左边栏
|		|-- page                   	 // 主要路由页面
|           |-- Identify.vue         // 图形验证码
|           |-- Login.vue            // 登录
|           |-- ModifyPassword.vue   // 修改密码
|           |-- ModifyUser.vue       // 修改用户
|           |-- Readme.vue           // 简介
|           |-- Register.vue         // 注册组件
|           |-- UserCenter.vue       // 用户中心
|           |-- Success.vue          // 修改成功
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // 忽略的文件
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件
|-- README.md                        // 说明

安装步骤

https://github.com/sakila1012/vue-login-manage-system.git     // 把项目下载到本地
cd manage-system    // 进入项目目录
npm install         // 安装项目依赖，等待安装完成之后

本地开发

// 开启前端服务器，浏览器访问 http://localhost:8083，在根目录下执行下面命令
npm run dev

服务端开发

// 开启后端服务器
cd service
node app

构建生产

// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build

vue-login-manage-system's People

Contributors

Stargazers

Watchers

Forkers

wangpanlin amwybj041989 libin1991 xuanzhaotech luwenchun letitgrow ricedarling cosecant-csc sunnyxia1992 erictop3 centful pollutions vwin xiranst forging2012 ailuhaosi xujackie1993 tieshengdetie xycodeterminator xjjy88888 xiaozhu7393 qq719862911 xuzhushiqingbo momotop-u jbiaojerry aldok10 icey830 lixianglong3210 vinlinch tianyyou liudechang magty lanyan666 niujianlong666 wicky345 hubterzeng endlessword joinnew suncwjustgo liao-zihao yangangzhang xianglongsdu qiusa duyuxiang110 lvorcool wnweinan091251 nueramina wangy0316 manxi123 dewey363 rudymemo 1003824904 lost-gain yccsword woaini521 qiaoba111 connor-tan hw50205 xuys1 bluelibra zengsk-gis w877713458 managertechteam usefulbug yiyi-001 brinedfish fuadhs88 qiuren315 luhai1 mjr625 iiooiioo888 rookie2435 choicelin d-d-study cherishmvp zxlgit519 fywoooooo kanhongda zozoxingxing kenkise lou329 lalalayujie wwwekiiii zhichucode

vue-login-manage-system's Issues

userApi.js和UserCenter.vue中的错误

userApi.js
//获取用户信息

var params = req.query;
//原文是var params = req.body;
// Nodejs取参

sql_name += " where username ='"+ params.name +"'";
//原文第一个双引号后少个空格

UserCenter.vue
//methods

getUserData() {
let username = sessionStorage.getItem('ms_username');
//原文是localStorage

self.$http.get('/api/user/getUser',{params:{"name":username}}).then(function(response) {
// get('',{params:JSON字符串})

用户注册成功，但是登录一直失败

调试了好久发现注册的时候传给后台的是form,登录的时候用JSON.stringify(self.ruleForm) 将form表单转了一下。到后台的时候req.body里的值再原来原始值得基础上又封装了一层key、value，导致获取name or password一直错误（undefined）。

我把登录的时候改为直接传self.ruleForm就好了。不知道有没有其他的人遇到。

#查询数据库优化

你好我是一名前端小白做demo的时候发现你的小作品并学习，根据你的提出的查询数据的问题我也写了一个一般般的demo 优化查询数据库的路由：

 
/**
 * 登录接口
 * 路由判断 查找用户接口
 */
router.post('/login', (req, res) => {
  var sql_name = $sql.user.select_name;
  var params = req.body;
  var keywords = JSON.parse(Object.keys(params)[0]);    
  conn.query(sql_name, [keywords.name], function (err, result) {
    if (err) {
      console.log(err);
    }
    console.log("result:", result);
    /**
     * 账户不存在
     */
    if (result[0] == undefined) {
      console.log("-1");

      return res.json({
        data: -1

      }) //查询不出username，data 返回-1
    } else {
      console.log("2");
      /**
       * 判断登录密码
       */
      if (result[0].password == keywords.password) {
        console.log("result.RowDataPacket.password:", result.RowDataPacket.password);
        return res.json({
          code: 200,
          data: 200
        })

      } else {
        /**
         * 密码错误
         */
        console.log("0");
        return res.json({
          data: 0
        })
      }
    }

查询数据的资料链接：http://xieyufei.com/2016/12/05/Nodejs-Query-Mysql.html

Hi，
当我用npm run dev测试，登录或者注册，后台都显示
[HPM] Error occurred while trying to proxy request /user/login from localhost:8086 to http://127.0.0.1:3000/api/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
前端报504错误，请问能提供解决方法吗？