1.1为什么要使用数据库
~~~
●动态网站中的数据都是存储在数据库中的
●数据库可以用来持久存储客户端通过表单收集的用户信息
●数据库软件本身可以对数据进行高效的管理
~~~
~~~
http://www.czxy.com/article?id=1
http://www.czxy.com/article?id=2
~~~
1.2什么是数据库
数据库即存储数据的仓库,可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件,可以通过API去操作它。
●常见的数据库软件有: mysql、 mongoDB、 oracle.

1.3 MongoDB数据库下载安装
下载地址:[https://www.mongodb.com/download-center/community](https://www.mongodb.com/download-center/community)
下载数据库和工具
On-premises>MongoDB Community Server
Tool>MongoDB Compass
1.4 MongoDB可视化软件
MongoDB可视化操作软件,是使用图形界面操作数据库的一种方式。

1.5数据库相关概念
在一个数据库软件中可以包含多个数据仓库,在每个数据仓库中可以包含多个数据集合,每个
数据集合中可以包含多条文档(具体的数据)。
| 术语 | 解释说明 |
| --- | --- |
| database | 数据库,mongoDB数据库软件中可以建立多个数据库 |
| collection | 集合,一组数据的集合,可以理解为JavaScript中的数组 |
| document | 文档,一条具体的数据,可以理解为JavaScript中的对象 |
| field | 字段,文档中的属性名称,可以理解为JavaScript中的对象属性 |
1.6 Mongoose第3三方包 npm install mongoose
●使用Node.js操作MongoDB数据库 需要依赖Node.js第三方包mongoose
●使用npm install mongoose命令下载
在当先项目下创建一个数据库文件夹(用于mongoose连接数据库)
1.7启动MongoDB
在命令行工具中运行`net start mongoDB`即可启动MongoDB,否则MongoDB将无法连接。
`net stop mongodb`停止运行
1.8数据库连接
使用mongoose提供的connect方法即可连接数据库。
~~~
mongoose.connect ( ' mongodb:// localhost/playground' )
.then(() => console.log ('数据库连接成功'))
.catch(err => console.log('数据库连接失败',err)) ;
~~~
连接前 要在当前项目下载mongoose工具 帮忙连接数据库

1.9创建数据库
在MongoDB中不需要显式创建数据库,如果正在使用的数据库不存在,MongoDB会自动创建。
3.MongoDB增删改查操作
3.1创建集合 (引用的ngoose模块使用里面的各种方法 其中有一个创建数据表的方法 )
创建集合分为两步, 一是对对集合设定规则,二是创建集合,创建mongoose.Schema构造函数的实例即可创建集合。
~~~
mongoose.Schema(构造函数 规则)
mongoose.model (根据构造函数 规则 创建数据表)
~~~
~~~
/设定集合规则
const courseSchema = new mongoose.Schema ( {
name: String,
author: String ,
isPublished: Boolean
}) ;
//创建集合并应用规则 (Course 数据库表名)
const Course = mongoose.model ('Course',courseSchema) ; / courses
~~~
3.2创建文档 (插入数据)
创建文档实际上就是向集合中插入数据。
分为两步:
①创建集合实例。
②调用实例对象下的save方法将数据保存到数据库中。
~~~
//创建集合实例
const course = new Course ({
name: 'Node.js coulFse' ,
author: ' 黑马讲师' ,
tags: ['node' ,'backend'] ,
isPublished: true
}) ;
//将数据保存到数据库中
course.save () ;
~~~
2.0 插入文档 数据库插入数据
~~~
Course.create ({name: ' JavaScript基础',author: ' 黑马讲师',isPublish: true}, (err, doc) => {
//错误对象
console.log (err)
//当前插入的文档
console.log (doc)
}) ;
~~~
~~~
Course.create ({name: ' JavaScript基础',author: , 黑马讲师',isPublish: true})
then(doc => console. log (doc) )
catch(err => console.log (err) )
~~~
3.3 mongoDB数据库导入数据
mongoimport -d数据库名称-c集合名称-file 要导入的数据文件
找到mongodb数据库的安装目录,将安装目录下的bin目录放置在环境变量中。
配置环境变量

## 3.4查询文档
//根据条件查找文档(条件为空则查找所有文档)
### 查询所有数据
~~~
Course.find().then (result => console.log (result) )
~~~
上面代码执行后的结果
~~~
//返回文档集合
[{
id: 5c0917ed37ec9b03c07cf95f ,
name: 'node.js基础' ,
author: 1 黑马讲师、
},{
_id: 5c09dea28acfb814980ff827 ,
name: ' Javascript '
author: ' 黑马讲师、
}]
~~~
### 通过\_id字段查找
~~~
User.find({_ id: ' 5c09f267aeb04b22f8460968 }).then(result => console . log(result))
~~~
### 根据条件查找对象 findone
~~~
findOne() 没传参数方法返回一条文档默认返回当前集合中的第一 条文档
then (返回正确的)
传了参数
Course.findone ({name: ' node. js基础' }).then(result => console.log (result) )
~~~
### //查询用户集合中年龄字段大于20并且小于40的文档 (匹配大于$gt 小于$lt)
~~~
查询用户集合中年龄字段大于20并且小于40的文档
age(属性 对象)
User. find({age: {$gt: 20,$lt:50}}) .then (result => console. log (result) )
~~~
### //匹配包含 $in 重点 常用
~~~
hobbies(属性 对象)
User. find({hobbies: $in: ['敲代码']}}) . then(result => console. log (result))
~~~
### //选择要查询的字段 select (不想查询某个字段 前面加 - )
~~~
User. find().select('name email') . then (result => console. log (result) )
~~~
### //将数据按照年龄进行排序 sort
~~~
升序
User.find().sort('age').then(result => console. log (result) )
//根据年龄字段进行降序排列 前面加-
User.find().sort('-age' ).then(result => console . log(result))
~~~
// skip 跳过(前面)多少条数据 limit 限制查询数量(搜出来的结果)
~~~
User.find().skip(2).limit(2).then(result => console. log (result) )
~~~
## 3.5删除文档
~~~
//删除单个 findoneAndDelete({})
Course.findoneAndDelete({}) . then (result => console. log (result) )
~~~

~~~
//删除多条文档
User . deleteMany({}) . then (result => console. log (result) )
~~~
## 3.6更新文档 (修改数据)
//更新单个 修改一个数据
~~~
User.updateOne ({查询条件},{要修改的值}).then(result => console.log (result))
User.update0ne( {name: '李四'}, {name: ' 李狗蛋'}).then(result => console.log (result))
~~~
/更新多个 修改多个数据
~~~
User.updateMany ({查询条件},{要更改的值}) . then (result => console.log (result))
//更新集合中的文档(更新多个)
User.updateMany({}, {age: 56}).then(result => console.log(result))
~~~
# 3.6 mongoose验证
在创建集合规则时,可以设置当前字段的验证规则,验证失败就则输入插入失败。
~~~
●required: true必传字段
●minlength: 3字符串最小长度 字符串
●maxlength: 20字符串最大长度 字符串
●min: 2数值最小为2 数字
●max: 100数值最大为100 数字
type: Date, //时间 default: Date.now //默认值 输入现在时间
enum选举 //判断输入的类型满不满足enum的要求,不满足,返回错误
●trim: true去除字符串两边的空格
●validate: 自定义验证器
●enum: ['html', 'Css', javascript', 'node.js']
//自定义错误信息 message
~~~
~~~
const postSchema = new mongoose . Schema({
title: {
type: String,
y// 必选字段
required: [true, '请传入文章标题'],
//字符串的最小长度
minlength: [2, '文章长度不能小于2'],
//字符串的最大长度
maxlength: [5, '文章长度最大不能超过5'],
//去除字符串两边的空格
trim: true
},
age:{
type: Number,
min:18,
max: 100},
publishDate: {
//时间
type: Date,
//默认值
default: Date.now
},
category: {
type: String,
//修 enum选举 判断输入的类型满不满足enum的要求,不满足,返回错误
//枚举列举出当前字段可以拥有的值
enum :{
values: [ ' html' , 'css' ,' javascript',' node.js'],
message:'分类名称要在一定的范围内才可以"
}
},
validate: {
validator: V => {
//返回布尔值
// true验证成功
// false 验证失败
// v要验证的值
return V && v.length > 4 //&&并且
},
//自定义错误信息
message:'传入的值不符合验证规则'
}
});
~~~
~~~
Post. create( {title:' aa”,age: 60, category: 'html', author: 'bd'})
.then(result => console.log( result) )
// 原 下面为优化版.catch(error => console.log(error) )
catch(error => {
//获取错误信息对象
const err = error. errors ;
//循环错误信息对象
for (var attr in err) {
//将错误信息打印到控制台中
console. log(err[attr][' message '] ) ;
~~~
.then(result => console.log( result) ) 获取代码执行后返回信息 then 输出正确的
.catch(error => console.log(error) ) 获取代码执行后返回信息 catch 错误的
3.7集合关联 populate
通常**不同集合的数据之间是有关系的**,例如文章信息和用户信息存储在不同集合中,但文章是某个用户发表的,要查询文章的所有信息包括发表用户,就需要用到集合关联。
~~~
●使用id对集合进行关联
●使用populate方法进行关联集合查询
~~~

3.7集合关联实现 ref(关联)
~~~
//用户集合
const User = mongoose.model ('User',new mongoose.Schema({ name: { type :
String } })) ;
//文章集合
const Post = mongoose.model('Post', new mongoose.Schema ({
title: { type: String } ,
//使用ID将文章集合和作者集合进行关联
author: { type: mongoose.Schema.Types.objectId,
ref: 'User' }
})) ;
//联合查询
Post.find()
.populate(' author' ) //查询具体的某个结果
.then((err, result) => console. log (result)) ;
~~~

# 3.8案例:用户信息增删改查
需求

添加修改页面

## 步骤
1.搭建网站服务器,实现客户端与服务器端的通信
2.连接数据库, 创建用户集合,向集合中插入文档
3.当用户访问/list时, 将所有用户信息查询出来
4.将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
5.当用户访问/add时, 呈现表单页面,并实现添加用户信息功能
6.当用户访问/modify时, 呈现修改页面,并实现修改用户信息功能
7.当用户访问/delete时, 实现用户删除功能
### 1.搭建网站服务器,实现客户端与服务器端的通信
~~~
const http = require( 'http' );
//创建服务器
const app = http. createServer();
//为服务器对象添加请求事件
app.on( ' request ', (req, res) => {
res .end( 'ok')
})
//监听端口
app.listen( 3000) ;
~~~
### 2.连接数据库, 创建用户集合,向集合中插入文档
在当前项目下下载mongoose 模块`npm install mongoose`
~~~
const mongoose =require( ' mongoose' ) ;
//数据库连接27017是mongodb数据库的默认端口
mongoose.connect( ' mongodb:/ / localhost/playground', { useNewUrlParser: true })
then(() => console.log( '数据库连接成功'))
catch(() => console.log( '数据库连接失败'));
//创建用户集合规则
const userSchema= new mongoose.Schema({
name: {
type: String,
required: true ,
minlength: 2,
maxlength: 20
},
age: {
type: Number,
min: 18
max :80
},
password: String,
email: String,
hobbies: [ String ]
})
//创建集合返回集合构造函数
const User = mongoose.model('User', userSchema) ;
~~~
### 3.当用户访问/list时,将所有用户信息查询出来 地址栏请求 在get 下操作
实现路由功能
呈现用户列表页面
从数据库中查询用户信息将用户信息展示在列表中
${[item.name](http://item.name/)} 写入数据库信息同步页面
~~~
引入模块功能
const url = require( 'url')
在服务器响应哪里添加
//为服务器对象添加请求事件
app.on( ' request ',async (req, res) => {
//请求方式
const method = req.method;
//请求地址
const { pathname } = Iurl.parse(req. url);
if (method=='GET') {
//呈现用户列表页面 在页面复制静态面 放在下面动态输出数据
if ( pathname =='/list') {
//查询数据
Let users= await User.find( );
console.log(users )
//html字符串 //静态页面复制在里面
Let list=' ';
//对数据进行循环操作
users.forEach(item => {
list +=’
<tr>
<td>${ item.name}</td>
<td>$ { item.age}</td>
<td>
<span>抽烟</ span>
< span>喝酒< / span>
< span>烫头</ span>
</td>
<td>${ item.email}</td>
</tr>
;
})
list +='
</ table>
</div>
</body>
';
返回数据在页面
res.end(list);
}
}else if (method=='POST') {
}
}
~~~

5.当用户访问/add时, 呈现表单页面,并实现添加用户信息功能
// 301代表重定向
// location 跳转地址
res.writeHead(301, {
Location:' / list '
});
~~~
引入 将字符串转换对象格式
const querystring = require( ' querystring ')
//为服务器对象添加请求事件
app.on( ' request ',async (req, res) => {
//请求方式
const method = req.method;
//请求地址
const { pathname } = Iurl.parse(req. url);
if (method=='GET') {
if ( pathname =='/list') {
}else if (pathname == ' /add') {
Let add =res.end( add)
}
}else if (method == ' POST') {
//用户添加功能
if ( pathname == ' /add') {
//接受用户提交的信息
Let formData=' '
//接受post参数
req.on( ' data',param => {
formData += param;
})
// post参数接受完毕
req.on( ' end ',async()=> {
Let user = querystring . parse( formData )
//将用户提交的信息添加到数据库中
await User . create(user);
// 301代表重定向
// location 跳转地址
res.writeHead(301, {
Location:' / list '
});
res.end();
~~~
### 6.当用户访问/modify时, 呈现修改页面,并实现修改用户信息功能
1.增加页面路由呈现页面
1.1.在点击修改按钮的时候将用户ID传递到当前页面
1.2.从数据库中查询当前用户信息将用户信息展示到页面中



2.实现用户修改功能
1.指定表单的提交地址以及请求方式
2.接受客户端传递过来的修改信息找到用户将用户信息更改为最新的

7.当用户访问/delete时, 实现用户删除功能

- web前端概念
- web前端工程师
- 什么是前端开发
- 前端开发需要学习什么技能
- 学习技能的介绍和知识点的掌握
- 资源
- 考证
- API
- 考试
- java规则
- 华为鲲鹏考试HCIP
- 软件
- ps切图
- VS cold 开发软件
- 插件
- 背景
- 第一阶段:html+css+js
- html
- html简介
- html骨架 &特殊符号
- img图片标签
- a标签 超链接
- 表格&列表
- 表单
- 思维导图
- css
- css
- css 过程
- css 使用方法
- css样式&运用方法
- css 选择器
- css 字体
- css 复合选择器
- css 显示
- display 标签显示 (重点)
- background 背景(重点)
- div 盒子
- 盒子 边框
- 盒子 内边距
- 盒子 外边距
- 盒子 模型布局
- 盒子 文字&插入图片
- 盒子 边框变圆角边框
- 盒子布局
- 浮动
- 定位
- 定位.
- 相对定位
- 绝对定位
- 固定定位
- 定位 水平居中
- 定位的、层叠顺序
- 定位小结
- css 思维导图
- css 技巧
- display 元素显示与隐藏
- cursor鼠标样式-用户界面样式
- 行内图片与文字垂直对齐
- 去除图片与盒子缝隙 vertical-align:middle
- 文字溢出
- css 精灵背景图
- 自动门-(背景图自动拉伸)
- 重叠边框不会加粗 margin:
- css 尖尖小三角
- 操作
- css 书写规范
- ps 工具
- ps 切片
- 清理浮动
- 背景图片水平居中&背景图半透明
- 样式继承
- 代码快捷键
- 代码简写
- CSS 3
- CSS3总结
- CSS3 动画过渡 transition:
- css 3 焦点选择器 (表单)
- css3 2D
- css3 动画
- css 3 3D动画
- 浏览器私有前缀
- html 5
- html5标签
- html5 新增input表单属性
- html5 css3属性选择器
- 第二阶段:移动web网页开发
- 移动端
- 手机基本属性
- 流式布局
- flex布局 主流
- rem布局
- rem-less
- rem开发方案
- rem开发案2
- 响应式布局
- Bootstrap前端开发框架
- 框架功能简介
- 移动端布局总结
- 实验.
- 实验
- 导航栏
- css 导航栏 (重点)
- 定位小广告
- css 页面制作
- 导航栏a 标签
- 新闻水平居中
- 内容展示 li
- 浮动导航栏
- 侧边栏给li 定高 & 行高测量
- 常用实验:内容 li块太大把另一块挤掉
- 盒子底部
- 导航栏.
- a标签导航栏
- 导航栏。
- 微信点击凹凸导航栏
- css 2D 点击下滑导航栏小三角
- 3D 点击翻转导航栏。
- 响应式开发-导航栏
- 网页内容
- 新闻内容水平居中
- 商品内容展览
- 商品内容布局
- 侧边栏
- 3D点击翻转 翻页
- 3D 点击翻转 导航栏
- 3D 动画旋转木马
- 底部下一页按钮
- css 3D 地图 热点图案
- 3D 页面等待动图
- 3D点击翻页 翻转
- 项目实验
- 网页
- 开发规范
- 页面开发
- 实验..
- 品乐购
- 移动端
- 手机端页面布局-移动京东首页
- flex 布局-携程
- 苏宁网移动端首页 rem适配布局
- 苏宁网移动端首页 rem适配布局 1
- rem适配方案flexible.js
- 框架-响应式-阿里百秀移动端首页
- 开发
- 开发移动端
- 第三阶段:JAVASCRIPT网页编程
- JavaScript
- 一:JavaScript 基础语法
- 解释型语言与编译型语言
- 标识符、关键字、保留字
- js 规范
- js 基本介绍
- js-变量
- 基本数据类型
- 数字类型 Number
- 字符串类型
- 布尔型 Boolean (对错)
- Undefined (未定义)和Null(空值)
- 检测变量的数据类型&自变量
- 数字类型转换 (页面获取转换)
- 运算符
- (判断语句 判断执行)流程控制
- 流程控制
- if 判断语句 (重点)
- 三元表达式
- 分支流程控制switch语句 (选项多个选择判断 可重点)
- JavaScript流程控制-循环
- for 循环
- 双重for循环
- while循环
- do while
- continue break 关键字
- 数组
- 函数 function
- js-作用域
- 解释器
- js对象
- 变量、属性、函数、方法的区别
- JavaScript内置对象.
- Math (数学)对象
- Date 日期对象 (要构造函数 new)
- Array 数组对象
- 字符串对象
- 1.简单类型与复杂类型
- 二:WebAPI 编程
- 1.:DOM简介
- 2. 获取元素
- 3.事件基础
- 4.操作元素
- 4.操作元素-2
- 5、节点操作
- 5.5删除节点
- 5.8 三种创建元素的区别
- 6. DOM重点核心
- 2:DOM事件高级
- 1.注册事件(绑定事件)
- 2.删除事件(解绑事件)
- 3. DOM事件流
- 4.事件对象
- 5.阻止冒泡(面试常见)
- 6.事件委托(代理、委派) (点击对象 他的父亲就响应事件)
- 7.常用的鼠标事件
- 8.常用的键盘事件
- 3:BOM
- 2.窗口加载事件
- 3.定时器
- 3.6 this
- 4. JS执行机制
- 5. location对象
- 6. navigator对象
- 7. history对象
- 4:PC端网页特效
- 三大系列总结
- mouseenter和mouseover的区别 (面试题)
- 1.元素偏移量offset系列
- 2.元素可视区client系列
- 3.元素滚动scroll 系列
- 4.动画函数封装 (轮播图会使用)
- 5.常见网页特效案例—轮播图
- 5.1 节流阀
- 5.常见网页特效案例—返回顶部
- 筋斗云
- 5:移动端网页特效
- 1.触屏事件
- classList属性 (添加类) classList属性
- 移动端:轮播图
- 移动端:返回顶部
- 2.2 click(点击)延时解决方案
- 3.移动端常用开发插件
- 4.移动端常用开发框架
- 1.本地存储 (可以作为历史记录)
- 三:jQuery快速开发
- 1. jQuery快速开发
- 2. jQuery的基本使用
- 2. jQuery常用API
- 1. jQuery选择器
- 2. jQuery样式操作
- 3. jQuery效果(动画效果)
- 5. jQuery属性操作
- 6. jQuery内容文本值
- 6. jQuery元素操作
- 3. jQuery事件
- 1. jQuery事件注册
- 2. jQuery事件处理
- 3. jQuery事件对象
- 4. jQuery对象拷贝
- 5. jQuery多库共存
- 6.jQuery插件
- ToDoList 学习记录
- 7. jQuery尺寸、位置操作
- 1.5链式编程
- 四:JavaScript高级(含ES6)
- 一:面向对象和类的继承
- 2. ES6中的类和对象
- 3.类的继承
- 二:构造函数和原型
- 1.构造函数
- 1.11扩展内置对象
- 2.继承
- 3. ES5中的新增方法
- 三:函数进阶
- 1.函数的定义和调用
- 2. this
- 3.严格模式
- 4.高阶函数
- 5.闭包
- 6.递归
- 四:正则表达式
- 2.正则表达式在JavaScript中的使用
- 3.正则表达式中的特殊字符
- 4.正则表达式中的替换
- 五:ES6简介(版本新增语句)
- 声明
- 解构赋值
- 剩余参数
- Array(数组)的扩展方法
- String的扩展方法
- Set数据结构(过滤重复参数)
- 第四阶段:NODE.JS与AJAX
- node.js
- 0、概述
- 1、node 无法运行
- 2、node 使用
- 0、node.js组成
- 1、Node.js模块化开发 (exports 导出) (require 导入)
- 2、系统模块
- 0、读取 fs.reaFile('文件路径文件名称' [, '文件编码'],callback) ;
- 1、写入 fs.writeFile('文件路径/文件名称' ,'数据',callback) ;
- 2、系统模块path路径操作 path.join('路径','路径',...)
- 3、第三方模块
- 4、Node.js中模块的加载机制
- 1、服务器端基础概念
- 0、创建web服务器
- 1、HTTP协议
- 2、HTTP请求与响应处理
- 3、路由 (页面切换路径)
- 4、静态资源
- 5、动态资源(重点)
- 6、Node.js异步编程
- 7、Node.js中的异步API
- 8、异步函数
- 2、前后端交互 MongoDB+Express
- 1.数据库概述及环境搭建
- 数据库操作
- 2、模板引擎的基础概念
- 3、Express框架简介及初体验
- 3、node 项目
- 0、node实战
- 1、登录
- 2、密码加密 修改小不足 数据库密码安全
- 3、用户登录 页面拦截
- 4、新增用户
- 5、Joi JavaScript对象的规则描述语言和验证器。
- 6、json formatter(查看接口数据 插件) 将数据库的多条设置为对象模式方便查看
- 7、数据分页
- 8、用户信息修改
- 9、用户信息删除
- 10、文件图片 上传数据库
- 11、文件读取
- 12、数据分页mongoose-sex-page 项目插件
- 13、mongoDB数据库添加账号
- 14、开发环境与生产环境
- 15、第三方模块config (文件拆分后,便于管理) 项目插件
- 16、文章评论
- 4、前后端交互Ajax
- 0、Ajax基础
- 0、Ajax函数封装
- 1、模板引擎
- 2、案例:验证邮箱地址唯一性 搜索框内容自动提示 省市区三级联动 案例:腾讯天气
- 1、验证邮箱地址唯一性
- 2、搜索框内容自动提示
- 3、省市区三级联动
- 4、案例:腾讯天气
- 3、FormData对象的作用
- 1、FormData对象的实例方法
- 2、FormData二进制文件上传
- 3、FormData文件上传进度展示
- 4、FormData文件上传图片即时预览
- 4、同源政策—Ajax请求限制
- 5、CORS跨域资源共享
- 6、访问非同源数据服务器端解决方案
- 7、cookie复习-Ajax技术发送跨域请求时,请求中携带cookie信息
- 1、$.ajax() 方法概述
- 作用:发送jsonp请求。
- 2、$.get()、$.post()方法概述
- 3、Todo案例
- 4、jQuery中Ajax全局事件
- 5、RESTful风格的API
- 6、XML基础
- 7、Git
- 8、Github
- 9、案例:NODE与AJAX2-阿里百秀
- 0、模板引擎
- 1、模板语法
- 2、项目简介-用户管理
- 1、用户管理 1.功能模块
- 2、开发模式
- 3、项目架构
- 4、项目运行环境搭建 (重点)
- 5、项目功能
- 1、登录功能
- 2、用户管理功能-添加用户
- 3、用户列表展示
- 4、修改用户信息功能 (页面jq渲染 触发事件 委托 父盒子 重点)
- 5、删除用户功能 (页面jq渲染 触发事件 委托 父盒子 重点)
- 6、批量删除用户
- 7、登录用户密码修改
- 6.文章-分类管理
- 1、添加分类
- 2、分类数据展示
- 3、修改分类
- 4、删除分类
- 7、文章-添加(写文章)
- 1、添加文章
- 2、文章列表数据展示
- 3、页面展示-分页
- 4、文章筛选
- 5、文章编辑
- 8、评论
- 1、评论列表展示
- 2、分页模板
- 3、评论删除
- 9、首页仪表盘-文章数量展示
- 10、图片轮播
- 11、网站设置
- 1、检查用户登录状态
- 2、首页展示
- 1、轮播图
- 2、热门推荐
- 3、点赞
- 4、搜索功能
- 5、评论功能
- 第五阶段:VUE.JS项目实战
- 0、vue 下载
- 1、vue基础
- 0、概述
- 1、vue基本使用
- 2、Vue模板语法
- 0、模板语法概览
- 1、指令
- 2、双向数据绑定
- 3、事件绑定
- 4、属性绑定
- 5、样式绑定
- 6、分支循环结构
- 基础案例:tab选择卡
- 3、常用特性概览
- 1、表单操作
- 2、自定义指令
- 3、计算属性
- 4、侦听器
- 5、过滤器 (格式化 数据 时间等)
- 6、生命周期
- 7、案例:补充知识(数组相关API)
- 8、案例:图书管理
- 4、Vue组件化开发
- 0、组件化开发-总结流程
- 1、组件注册
- 2、调试工具安装
- 3、组件间的数据交互方式 (template 模板)
- 1、父组件向子组件传值
- 2、子组件向父组件传值
- 3、非父子组件间传值
- 4、组件插槽
- 4、组件化开发-购物车案例
- 5、Vue全家桶-前后端交互
- 1、前后端交互模式
- 2、Promise用法
- 1、Promise基本用法
- 2、基于Promise处理Ajax请求
- 3、then参数中的函数返回值
- 4、Promise常用的API
- 3、接口调用-fetch用法
- 4、接口调用-axios用法
- 5、接口调用-async/await用法
- 6、基于接口的案例-基于后台接口重构图书管理案例
- 6、Vue全家桶-前端路由
- 1、 vue-router的基本使用
- 2、路由重定向
- 3、vue-router嵌套路由
- 4、动态匹配路由
- 1、动态路由使用
- 2、路由组件传递参数
- 5、vue-router命名路由
- 6、vue-router编程式导航 (页面跳转)
- 7、基于vue-router的案例-后台路由管理
- 2、前端工程化:ES6模块化和webpack打包
- 1、模块化相关规范
- 1、ES6模块化的基本语法
- 2、webpack
- 1、webpack中的加载器
- 3、Vue单文件组件
- 1、webpack中配置vue组件的加载器
- 2、在webpack项目中使用vue
- 3、webpack打包发布
- 4、Vue脚手架
- 1、Vue脚手架的自定义配置
- 5、Element-Ul的基本使用
- 3、Vue实战项目:电商管理系统(Element-UI)
- 项目码云
- 0、项目初始化
- 1、后台项目的环境安装配置
- day01-项目初始化登录功能开发
- 0、删除不要的组件
- 1、登录功能实现
- 1、路由导航首位控制访问权限
- 2、退出功能
- 3、语法警告
- 4、优化 element-ui 按需组件的导入形式.
- 5、提交登录功能代码
- day02-用户列表功能开发
- 1、主页布局
- day03-权限管理功能开发
- day04-分类管理开发
- day04-参数管理
- day05-商品列表功能开发-数据获取配置接口(重点)
- day06-订单管理功能开发
- day06-项目优化_上线-项目优化策略
- day07-项目优化上线
- 1、项目优化
- 1、项目优化策略
- 2、通过externals加载外部CDN资源
- 3、通过CDN优化ElementUl的打包
- 4、首页内容定制
- 5、路由懒加载
- 2、项目上线--项目上线相关配置
- 4、vue 模板
- 5、Vuex项目实战
- 1、Vuex概述
- 2、 Vuex的基本使用
- 3、Vuex的核心概念
- 4、基于Vuex的案例—Todos
