全栈
竹立荷塘
这个作者很懒,什么都没留下…
展开
-
20. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端周报管理页面(主页面和详情页面)
接下来主要是周报管理页面的主页面 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=.原创 2020-09-27 17:42:45 · 1560 阅读 · 3 评论 -
19. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端周报管理页面(新增和编辑)
然后我们开始编写此系统的用户管理页面,这个页面分为四个大部分,主要的周报管理页面,周报详情页面、新增周报页面和编辑周报页面。我们先来看一下新增周报页面 WeeklyAdd.vue和编辑周报页面WeeklyEdit.vue。一、WeeklyAdd.vue(新增周报页面)1.1WeeklyAdd.vue 页面html部分:<template> <div class="weekly-main-wrap weekly-add-wrap"> <h3 cl..原创 2020-09-27 17:34:59 · 1386 阅读 · 0 评论 -
18. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端用户管理页面
接下来我们开始编写此系统的用户管理页面,这个页面分为一个大部分两个小部分,即一个主要的用户管理页面,新增用户弹窗和编辑用户弹窗。需要我们创建一个User.vue(主要的用户管理页面),User下的Add.vue(新增用户弹窗)、Edit.vue(编辑用户弹窗)。一、Add.vue(新增用户弹窗)1.1 Add.vue 页面html部分:<template> <el-dialog title="新增管理员" :visible.sync="showFlag" custom-c原创 2020-09-27 17:04:15 · 2408 阅读 · 0 评论 -
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在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.原创 2020-09-27 16:53:08 · 1703 阅读 · 0 评论 -
16. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端登录页面
接下来开始前端页面编写,在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"原创 2020-09-27 16:49:58 · 1211 阅读 · 1 评论 -
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-登录页面
我这里的页面一般分为三部分: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原创 2020-05-19 08:52:06 · 1214 阅读 · 0 评论 -
10. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端创建vue单页面项目
一、创建vue单页面项目我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。1. 安装Vue-CLInpm install -g @vue/cli# ORyarn global add @vue/cli安装之后,你就可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮...原创 2020-04-26 13:43:13 · 1940 阅读 · 0 评论 -
8. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-后台用户接口编写
接口主要涉及到登录、增删改查等功能,主要分为两部分,用户相关接口和周报相关接口。在项目根目录下创建一个controls文件夹,然后下面创建一个user.js文件,用来管理户相关接口。...原创 2020-04-22 13:17:30 · 2328 阅读 · 3 评论 -
Vue+nodeJs+MySql之周报管理系统
Vue+nodeJs+MySql之周报管理系统原创 2020-04-20 15:09:59 · 3683 阅读 · 3 评论 -
7. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-请求封装和sql语句封装
一、请求封装有一些请求方法使用非常频繁,这里我们将它封装一下;在项目根目录下创建一个sql文件夹,然后下面创建一个http.js文件,用来管理共用的请求方法。let mysql = require('mysql');let db = require('../config/db');let pool = mysql.createPool(db);const jwt = require...原创 2020-04-20 12:56:22 · 1347 阅读 · 0 评论 -
6. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-接口地址管理和封装自定义的js方法
在项目根目录下创建一个routes文件夹,然后下面创建一个router.js文件,用来管理所有接口// 接口地址管理let express = require('express');let user = require('../controls/user');let weekly = require('../controls/weekly');let api = require('....原创 2020-04-16 13:07:06 · 1043 阅读 · 0 评论 -
5. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-Express服务器入口文件index.js设置
一、Express服务器入口文件index.js设置// node 后端服务器const router = require('./routes/router'); // 接口地址管理const path = require('path');const bodyParser = require('body-parser');const express = require('expre...原创 2020-04-14 13:18:15 · 1256 阅读 · 0 评论 -
3. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-数据库( 图像化界面)
前面说了SQL语句方式创建数据库,这节来说一下图形化界面创建数据库的方式。图形化界面创建数据库我用的数据库图形化工具是:Navicat Premium,下面我们来看看如何用Navicat Premium创建数据库。一、创建数据库二、 创建数据库表1. 创建user表2. 创建weekly表项目体验链接周报管理系统体验链接:http...原创 2019-11-07 14:36:38 · 3301 阅读 · 1 评论 -
2. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-数据库(SQL语句)
今天开始步入Vue+nodeJs+MySql之周报管理系统项目的第一步——数据库。我这里用的数据库是MySql数据库。对数据库的操作主要有两种方式:1. SQL语句; 2. 图像化界面。接下来我们来看看这两种方式分别是怎样对数据库进行操作的吧。SQL语句方式1. 下载MySQL数据库MySQL下载链接:https://dev.mysql.com/downloads/mysql/...原创 2019-11-01 16:15:07 · 4245 阅读 · 1 评论 -
1. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前言
最近一段时间因为项目需要学了一段时间nodeJs,并用Vue+nodeJs+MySql实现了一套周报管理系统,整体逻辑比较简单。但是可以我们完整的了解一个项目从数据库到后台到前端的实现过程,适合有一定前端基础(包括HTML5、CSS3和JavaScript,对ES6最好有一些了解)但是不太了解这一块又对此有兴趣的的小伙伴们可以拿来练手。内容主要分为三大块:1) 数据库(mysql)2)...原创 2019-10-29 23:49:16 · 7395 阅读 · 16 评论