Vue+Element+Node 开发企业通用管理后台系统
文章平均质量分 93
Vue学习笔记
雪急飞绪
专攻JS和Python,现役前端
展开
-
项目和构建发布
前端项目构建前端代码为什么要打包浏览器只能识别 html、css、js 代码,浏览器没办法识别 vue 文件没法识别 ES6 import export 代码,也没法识别 CommonJS 中的 require module.export修改 vue.config.js 的 publicPath 的 / 为 .module.exports = { publicPath: '.'}之后打包项目将 dist 文件夹拷贝到 Nginx 目录下远程时需要把 upload.conf 中 a原创 2021-12-06 15:48:46 · 1217 阅读 · 0 评论 -
电子书编辑和删除
list 页面创建 src\views\book\list.vue 文件:<template> <div class="app-container"> <div class="filter-container"> <el-input v-model="listQuery.title" placeholder="书名" style="width: 200px" class="f原创 2021-12-02 11:24:15 · 652 阅读 · 0 评论 -
电子书列表页面
电子书编辑页面展示把电子书删除后会 emit onRemove 方法,执行该方法时把数据赋上默认值点击树形菜单时新开一个 tabs<template> <ebook-upload :file-list="fileList" :disabled="isEdit" @onSuccess="onUploadSucess" @onRemove="onUploadRemove" /> <el-tree :data="cont原创 2021-11-26 16:34:22 · 626 阅读 · 0 评论 -
电子书解析
Book 构造函数Book 对象分为两种场景:直接从电子书文件中解析出 Book 对象从 data 对象中生成 Book 对象class Book { constructor(file, data) { if (file) { this.createBookFromFile(file) } else { this.createBookFromData(data) } } createBookFromFile(file) { c原创 2021-11-19 17:01:37 · 1786 阅读 · 0 评论 -
电子书上传
创建上传页面组件在前端目录,新建 src\views\book\components\Detail.vue<template> <div>isEdit:{{ isEdit }}</div></template><script>export default { name: 'Detail', props: { isEdit: Boolean }}</script><style lang="原创 2021-11-19 16:50:54 · 1536 阅读 · 0 评论 -
用户登录【下】
后端 API 处理流程搭建 https 服务首先需要将 https 证书拷贝到 Node 项目中,然后添加如下代码:const fs = require('fs')const https = require('https')const privateKey = fs.readFileSync('./https/book.llmysnow.top.key', 'utf8')const pem = fs.readFileSync('./https/book.llmysnow.top.pem',原创 2021-11-16 17:38:43 · 2283 阅读 · 1 评论 -
用户登录(中)
登录组件分析src/views/login/index.vue登录组件布局要点如下:el-form 容器,包含 username 和 password 两个 el-form-item,el-form 主要属性:ref :用来获取 el-form 表单实例在表单提交时,通过该实例调用 validate 方法model :对应 data 中的 loginFormrules :表单的验证项,验证规则主要才是用 async-validator详细用法可以查看我这篇文章中的 async原创 2021-11-11 14:46:55 · 2838 阅读 · 1 评论 -
用户登录【上】
登录流程分析界面及逻辑简化template 修改修改标题 <h3 class="title">小慕读书</h3>删除提示区 <div style="position:relative">...</div>修改 input 的 placeholder 为中文,修改 el-button 中的文字为中文删除 el-dialog 代码script 修改删除 SocialSign 的引用和注册,删除 login 组件的 components 文件原创 2021-11-05 10:18:09 · 2972 阅读 · 1 评论 -
项目技术架构
项目技术架构三个应用小慕读书管理后台(管理电子书)黄色的部分表示在服务端完成,绿色部分表示在前端完成小慕读书小程序(查阅电子书)小慕读书 H5(提供阅读器)项目目标完全在本地搭建开发环境贴近企业真实应用场景依赖别人提供的 API 将无法真正理解项目的运作逻辑技术难点分析登录用户名密码校验token 生成、检验和路由过滤前端 token 校验和重定向电子书上传文件上传静态资源服务器电子书解析epub 原理zip 解压xml 解析原创 2021-10-28 18:15:45 · 2783 阅读 · 1 评论 -
服务端开发框架搭建
Node查看 node 源码Node 基础可以查看我这篇文章:Node 学习Node 是一个基于 V8 引擎的 Javascript 运行环境,它使得 Javascript 可以运行在服务端,直接与操作系统进行交互,与文件控制、网络交互、进程控制等运行、调试 Nodebash 运行node app.jsNodemon 自动重启监视代码修改,自动重启npm i nodemon -gnodemon app.jsVSCode 调试 debug事件循环详细可以查看原创 2021-10-28 08:43:15 · 380 阅读 · 0 评论 -
前端框架搭建
项目搭建git clone https://github.com/PanJiaChen/vue-element-admincd vue-element-admincnpm inpm run dev删除 src/views 下的源码,保留如下几个文件夹:dashboard:首页error-page:异常页面login:登录redirect:重定向对 src/router/index 进行相应修改删除 Router Modules 下面的 4 条 import删除路由(只保留重定原创 2021-10-11 17:30:48 · 1174 阅读 · 0 评论 -
Vuex 和 Vue-router 进阶
Vuex 原理解析Vuex 源码案例链接Vuex 的原理关键:使用 Vue 实例管理状态Vue.use(registerPlugin) 全局使用这个组件vuex._vm = new Vue({ ... }) 创建全局 Vue 实例全局混入了一个 beforeCreate 钩子函数,里面注入 init 方法。init 方法给各个组件的实例上赋值 $store<body> <div id="root">{{ data }}</div> <原创 2021-10-11 09:52:24 · 492 阅读 · 1 评论 -
Element-UI入门
基本用法Element-UI 入门初始化项目并安装 ElementUI# 初始化项目vue create element-test# 切换目录运行cd element-testnpm run serve# 安装element-uinpm i element-ui -S全局引入import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)原创 2021-09-27 19:39:35 · 1473 阅读 · 0 评论 -
Vue进阶下
前置:new Vue 做了什么在看 provide inject 之前,最好先知道 new Vue 都做了什么(用的案例是 provide inject 那个)Vue 的庐山真面目就在此,实际上就是一个用 Function 实现的类,我们只能通过 new Vue 去实例化它在 this._init(options) 执行之前,除了给它的原型 prototype 扩展方法,还会给 Vue 这个对象扩展全局静态方法(set、delete、nextTick… -> 挂载到 Vue ASSET_原创 2021-09-27 10:30:14 · 847 阅读 · 0 评论 -
Vue进阶上
$emit 和 $on案例链接$emit 和 $on 主要负责事件的定义和消费,以实现逻辑的解耦<body> <div id="root"> <button @click="boost">触发事件</button> </div> <script> new Vue({ el: '#root', data() { return { messag原创 2021-09-27 10:28:33 · 439 阅读 · 0 评论