一片天空

接下来主要是周报管理页面的主页面 Weekly.vue 和详情页面WeeklyDetail.vue。一、Weekly.vue（周报管理主页面）1.1 Weekly.vue 页面html部分：<template> <div class="weekly-wrap"> <!-- 搜索框 start --> <el-form class="main-search" :inline="true" :model="keywords" ref=.

然后我们开始编写此系统的用户管理页面，这个页面分为四个大部分，主要的周报管理页面，周报详情页面、新增周报页面和编辑周报页面。我们先来看一下新增周报页面 WeeklyAdd.vue和编辑周报页面WeeklyEdit.vue。一、WeeklyAdd.vue（新增周报页面）1.1WeeklyAdd.vue 页面html部分：<template> <div class="weekly-main-wrap weekly-add-wrap"> <h3 cl..

接下来我们开始编写此系统的用户管理页面，这个页面分为一个大部分两个小部分，即一个主要的用户管理页面，新增用户弹窗和编辑用户弹窗。需要我们创建一个User.vue（主要的用户管理页面），User下的Add.vue（新增用户弹窗）、Edit.vue（编辑用户弹窗）。一、Add.vue（新增用户弹窗）1.1 Add.vue 页面html部分：<template> <el-dialog title="新增管理员" :visible.sync="showFlag" custom-c

这期开始主页面的编写，在src\views目录下创建主页面Home.vue。一、Home.vue 页面1.1 Home.vue 页面html部分：<template> <el-container class="home-wrap"> <!-- header start --> <el-header class="flex"> <div class="logo flex-item"><i clas.

接下来开始前端页面编写，在src\views目录下创建登录页面Login.vue和主页面Home.vue。一、Login.vue 页面1.1 Login.vue 页面html部分：<template> <div class="login-container"> <el-form class="login-main sub-center-center" :model="formData" :rules="formRules" ref="formData"

我这里的页面一般分为三部分：html、js和css。接下来开启我们的页面构建之旅。一、 想实现的效果二、 页面实现1. html首先我们想将登录的布局写出来。<template> <div class="login-container"> <el-form class="login-main sub-center-center" :model="formData" :rules="formRules" ref="formData" label-posit

Element主题颜色和我项目设计默认的颜色不一致，我自定义了一下主题。一. 创建文件，修改主色调Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。我这里是在src目录下的themes/element目录下创建了一个样式文件element-variables.scss，并写入以下内容：/* 改变主题色变量 */$--color-primary: $color-main;/* 改变 icon 字

在src目录下创建config目录，并在此目录下创建两个文件http.js和interface.js，其中http.js用来对axios请求进行封装，interface.js用来对此项目中用到的接口进行统一封装。一、axios请求封装http.js1. axios 全局配置：import axios from 'axios'import store from '../store'import router from '../router'import common from '../asset

在main.js同级目录下创建router.js文件用来管理路由：我这里的路由采用的是history模式：import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const originalPush = Router.prototype.pushRouter.prototype.push = function push (location) { return originalPush.call(this, lo

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。我这里主要使用它来存储一些全局变量以及用户的状态。一、创建mutation-types.js文件，对mutations统一管理这样做的目的主要是：1）为了减少编码，比如多个地方存在“save_user_info”时，用常量来引用，可维护性更高，减少手抖多一个字母少一个字母的错误。2）大项目多人开发时，对mutations统一管理，找函数很直观。

一、main.js解释说明main.js是vue项目的入口文件，项目中所有的页面都会加载main.js，main.js主要有三个作用：1.实例化Vue；2.放置项目中经常会用到的插件和CSS样式；3.存储全局变量。二、此项目中的main.js的核心代码import 'babel-polyfill'import Vue from 'vue'import './assets/styles/reset.css'import ElementUI from 'element-ui'import '

Vue-cli3 搭建的项目,之所以界面想对之前较为简洁,因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来设置新的配置。一、创建vue.config.jsvue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.jso

一、后台周报接口编写在已有的controls文件夹，然后下面创建一个weekly.js文件，用来管理周报相关接口。1. 引入所需文件首先将需要用到的已封装的方法文件引入到weekly.js文件中const $sql = require('../sql/sqlMap')const $http = require('../sql/http')const $time = requi...

接口主要涉及到登录、增删改查等功能，主要分为两部分，用户相关接口和周报相关接口。在项目根目录下创建一个controls文件夹，然后下面创建一个user.js文件，用来管理户相关接口。...

Vue+nodeJs+MySql之周报管理系统

一、请求封装有一些请求方法使用非常频繁，这里我们将它封装一下；在项目根目录下创建一个sql文件夹，然后下面创建一个http.js文件，用来管理共用的请求方法。let mysql = require('mysql');let db = require('../config/db');let pool = mysql.createPool(db);const jwt = require...

在项目根目录下创建一个routes文件夹，然后下面创建一个router.js文件，用来管理所有接口// 接口地址管理let express = require('express');let user = require('../controls/user');let weekly = require('../controls/weekly');let api = require('....

一、Express服务器入口文件index.js设置// node 后端服务器const router = require('./routes/router'); // 接口地址管理const path = require('path');const bodyParser = require('body-parser');const express = require('expre...

前面说了SQL语句方式创建数据库，这节来说一下图形化界面创建数据库的方式。图形化界面创建数据库我用的数据库图形化工具是：Navicat Premium，下面我们来看看如何用Navicat Premium创建数据库。一、创建数据库二、 创建数据库表1. 创建user表2. 创建weekly表项目体验链接周报管理系统体验链接：http...

一、安装nodejs官网下载链接：https://nodejs.org/en/download/（选择适合自己的版本下载）二、创建后台项目文件我是在最外层创建了一个大目录文件demo-weekly，里面放了后台文件夹back-end、前端文件夹front-end和一个说明文件README.md。下面我们来说一下如何创建后台项目文件：1.创建项目1）假定你已经安装...

今天开始步入Vue+nodeJs+MySql之周报管理系统项目的第一步——数据库。我这里用的数据库是MySql数据库。对数据库的操作主要有两种方式：1. SQL语句； 2. 图像化界面。接下来我们来看看这两种方式分别是怎样对数据库进行操作的吧。SQL语句方式1. 下载MySQL数据库MySQL下载链接：https://dev.mysql.com/downloads/mysql/...

最近一段时间因为项目需要学了一段时间nodeJs，并用Vue+nodeJs+MySql实现了一套周报管理系统，整体逻辑比较简单。但是可以我们完整的了解一个项目从数据库到后台到前端的实现过程，适合有一定前端基础（包括HTML5、CSS3和JavaScript，对ES6最好有一些了解）但是不太了解这一块又对此有兴趣的的小伙伴们可以拿来练手。内容主要分为三大块：1) 数据库（mysql）2)...