简介
Web前端技术栈包括
- elementUI
- Nuxt
- Vue.js
- webpack
- ESLint
- Node.js
- axios
- mock.js
- ES6
- Swagger
核心：Node.js和Vue.js
webpack
webpack:打包, 可用将js等静态资源进行压缩，从而提高性能 可以打包js\css\图片等资源
使用
下载安装
cnpm install webpack -g
cnpm install webpack-cli -g
测试：
webpack -v
配置
新建并配置配置文件webpack.config.js
var path = require( 'path') ;
module. exports = {
entry: './src/main.js' ,//入口文件
output: {//输出文件
//_ di rname/.dist/bundle.is
path: path. resolve(_ dirname, '.dist'),
filename : 'bundle.js
}
}
运行
cmd到指定目录
webpack
webpack不能实现自动更新，修改代码后需要自己重新手动打包
** 注意**：webpack本身只能打包js文件如果想打包css和图片文件的时候需要安装插件
安装插件
npm install style-loader css-loader --save-dev
使用插件打包css
配置文件
webpack.config.jsvar path = require( 'path') ; module. exports = { entry: './src/main.js' ,//入口文件 output: {//输出文件 //_ di rname/.dist/bundle.is path: path. resolve(_ dirname, '.dist'), filename : 'bundle.js }, moudle:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] } }css文件要在主函数(main.js)中引用
require('xxx.css')使用
执行cmd
webpack小结
今后要使用css和js只要直接在html中引用bundle.js
实现修改css/js后，不打包，直接使得html生效
安装
npm i webpack-dev-server --save-dev
如果直接执行： webpack-dev-server ，会报错误：缺失该命令。
原因：能够在cmd中执行直接的命令，必须是全局命令。
全局安装
npm i webpack-dev-server -g
启动
cmd执行
webpack-dev-server
启动： webpack-dev-server ：自动将打包后的boundle.js ->加载到内存中（boundle.js）
webpack-dev-server启动模式，会将boundle.js加载到内存中。使用时，直接在当前目录中引用<script src="bundle.js"></script>
这样好处：
- 热更新，css/js ->html
- 在内存中，因此速度快
也可以将该命令 配置在package.json中配置scrpit脚本
{
"scripts": {
"dev" : "webpadk -dev-server "
},
"devDependencies": {
"css- loader": "^3.0. 0",
"style-loader": "^0.23. 1 ",
"webpack": "^4.35.2",
"webpack-cli ":1
1^3.3.5”
"webpack -dev-server": "^3. 7.2"
}
}
直接运行
npm run dev
即可
可以改修改启动时的默认文件目录：
修改成目录而不是文件
默认的文件名是index.html
"scripts":{ "dev" : "webpack-dev-server --contentBase src" },d:/a/b/c/index.htmld:/a/b/c/
修改端口以及自动启动
"scripts":{
"dev" : "webpack-dev-server --port 8888 --open"
}
注意：
console.log(str);//cmd打印 - 调试窗口
document.write(str);//html
ES6
ESMAScript6.0 是一种规范JavaScript只是它的一个实现
它有1、2、3、5、6这几个版本，4被废弃了
ESMAScript6.0 是一套规范（2015年产生）：
javascript是ESMAScript的具体实现
NodeJs是javascript的脚本库
注意：
NodeJs支持大部分的ESMAScript6.0 标准， 个别不支持 的需要回退5.0.
版本回退，NodeJS会通过转换器自动搞定。
转换器
配置转换器
新建文件并编辑(.babelrc)
{
"presets":['es2015']
}
安装转换器
cnpm install babel-preset-es2015 --save-dev
–save-dev：以dev的方式安装
安装命令行工具
cnpm install babel-cli -g
使用：
正常
node xxx.js个别：
如果遇到Nodejs不支持的ES6，则切换使用：
babel-node xxx.js
变量自动提升等级
test();
function(){
if(3<2>){
var a = 123;
}else{
console.log(a);
}
}
运行结果：undefined
没有报错
原因：当使用a变量的时候发现当前找不到a但是上一级中有a，因此自动将a的等级提升变成
test();
function(){
var a；
if(3<2>){
a= 123;
}else{
console.log(a);
}
}
这种感觉
如果不想自动提升则使用关键字let
test();
function(){
if(3<2>){
let a = 123;
}else{
console.log(a);
}
}
运行结果：报错
小结：
- var定义的变量，如果不存在，会自动提升（ 会将之前的局部变量，提升成全局变量 ）
let:ES6 定义变量，和java等语言一样 严格控制变量的作用域（ES6新规范）
const：常量（ES6新规范）
占位符/模板字符串
console.log('张三的年龄是：'+age);
可与写成
console.log(`张三的年龄是：${age}`);
注意:占位符的符号是 ` 而不是 ‘
换行符
以前想要换行
console.log('张三的年龄是：\
100');
现在：
console.log(`张三的年龄是：
100`);
不需要使用\连接
函数默认参数
function test(a){
console.log(a);
}
test()
输出结果：
undefined
现在
function test(a=99){
console.log(a);
}
test()
输出结果
99
箭头函数
- 不需要function关键字
- 省略return
- 继承this
之前
function test(a,b){
console.log(a+b);
}
现在
(a,b)=> console.log(a+b);
以前
function test(a,b){
return a+b;
}
现在
(a,b)=> (a+b);
对象初始化
以前
function persion(pname,page){
return {
name:pname;
age:page;
}
}
现在
function persion(pname,page){
return {
pname;
page;
}
}
可以省略属性名
解构：方便的给对象、数组赋值
以前
var person={
name:'zs',
age:23
}
var pname =persion.name;
var page = persion.age;
console.log(`$(pname),$(page)`);
现在
var person={
name:'zs',
age:23
}
var {name,age}=persion;
console.log(`$(name),$(age)`);
变量名与属性名要相等
数组赋值
const fruit = ['apple','orange'] ;
let [one,two] = fruit;
值的顺序与数组的顺序一致
传播Spread Operator
const fruit = ['apple','orange'] ;
const fruit1=[...fruit,'pear']
此时fruit1中的前两个值就是fruit中的值
var person={
name:'zs',
age:23
};
var person2={
...persion,
height:180
};
person2对象前两个属性是person中的属性
导入导出
exports require()
exports.fn=function(){
console.log('xx');
}
require('./hello.js')
export import
var fn=function(){
console.log('xx');
}
export{fn};
import{fn} from './hello.js'
使用export import时需要使用bable-node指令执行js文件
分号结尾
分号 ：风格问题 可以加也可以不加（建议要么加要么不加）
两个特殊情况 必须加：
下一条语句是()或[]开头，则上一条必须加;
//以()开头 (function(){})() //以[]开头 ["a","b","c"].forEach(function(){ })
当都不加时，上一句的分号可以加在下一句的开头，即
//以()开头
;(function(){})()
//以[]开头
;["a","b","c"].forEach(function(){
})
数据类型
基本类型
- string
- number
- boolean
- undefined ：只定义，没赋值; var a ;
- null
引用类型
- Object：任何对象
- Function:函数
Array：数组
数组和函数 都属于Object
判断类型
== / ===
== 宽松的判断（自带类型转换）
1=="1" 此时为true===严格的判断 （建议使用）
1==="1" 此时为falsetypeof：判断是否是某个类型 ，结果以“字符串形式”体现
var num; console.log(num,typeof num === 'undefined');输出结果：
undefined trueinstanceof ：判断是否某个具体类型
prototype 原型
可以向对象 增加属性 或者方法
每个函数都自带一个prorotype属性 ，默认情况下 指向一个空对象{} (称为原型对象，prototype对象) 原型对象（prototype对象） 都有一个constructor（构造方法）属性，它指向函数本身
function myfun(){
}
console . log(myfun. prototype )
console . log( myfun . prototype . constructor )
结果：
myfun{} 对象
[Function: myfun] 方法
使用
function Myfun(){
}
Myfun.prototype.say=function(){
console.log("this is a methods")
}
var myfun= new Myfun();
myfun.say();
注意：
如果一个函数只有定义，即只有右边
Myfun(){}，可以直接使用函数名.prototype;如果一个函数有
var myfun = function Myfun(){},则只能通过myfun.prototype
Restful编程风格
参数格式
get方式传值
localhost:8080/myproject?name=zsRestful方式传值
localhost:8080/myproject/zs ，将zs传递给后端请求方式
post： 增（查） delete: 删 put： 改 get： 查
get请求方式的地址栏中：
localhost:8080/myproject?name=zs&age=23&hei=xxx&xxx...............
地址栏长度有限制 260-300 如果请求参数太长，超过了地址栏 范围，则只能换用其他请求方式（post）
swagger
Swagger是一款RESTFUL接口的文档在线自动生成+功能测试功能软件。Swagger是一个规范和完整的框架，用于生成、描述、调用和可视化RESTfu风格的web服务。目标是使客户端和文件系统作为服务器一同样的速度来更新文件的方法，参数和模型紧密集成到服务器。这个解释简单点来讲就是说，swagger是一款可以根据restful风格生成的接口开发文档，并且支持做测试的一款中间软件。
下载安装
下载swagger Editor
安装：package.json目录执行：
npm install
如果出现以下问题：
Error: Can't find Python executable "python", you can set the PYTHON env variable
解决：
* 管理员身份启动cmd
* npm install --global --production windows-build-tools
再次执行：
npm install
或使用在线版
启动
双击index.html文件
使用
swagger: '2.0' swagger版本号
info:
version: "1.0.0" 文档的版本当
title: School-API 文档名称
host: xxx.xx.xx 项目地址
basePath: /xx 项目名
paths: 项目具体路径
/xx: 第一个访问地址
post: post请求
summary: 新增学校 注释
parameters: 传参
- 第一个参数，一个-代表一个参数
name: body 参数名
in: body 对象
description: 学校实体类 参数描述
required: true 参数是可选还是必须的
schema: 定义对象类型
$ref: '#/definitions/School' 类型是definitions中的School类型，definitions定义在后面
responses: 响应
200: 状态码
description: 成功响应 描述
schema: 响应数据
$ref: '#/definitions/ApiResponse' 数据类型
get: get请求
summary: 返回学校列表 描述
responses: 响应
200: 状态码
description: 成功响应 描述
schema: 数据
$ref: '#/definitions/ApiSchoolListResponse'
definitions: 对象类型
School: 名称
type: object 类型
properties: 属性
id: 属性名
type: string 属性类型
description: ID 描述
name: 属性名
type: string 属性类型
description: 学校名称 描述
ApiResponse: 对象名
type: object 对象类型
properties: 属性
flag: 标识是否成功
type: boolean 类型
description: 是否成功 描述
code: 状态码
type: integer
format: int32
description: 返回码
message: 返回信息
type: string
description: 返回信息
ApiSchoolResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
data:
$ref: '#/definitions/School'
SchoolList:
type: array
items:
$ref: '#/definitions/School'
ApiSchoolListResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
data:
$ref: '#/definitions/SchoolList'
in 的类型
localhost: 8080/yq/school?a=b&c=d -query
localhost: 8080/yq/school/b/d -path
localhost: 8080/yq/school -body 对象类型
等等其他类型
实例
swagger: '2.0'
info:
version: "1.0.0"
title: School-API
host: xx.xx.xx
basePath: /xx
paths:
/school:
post:
summary: 新增学校
parameters:
-
name: body
in: body
description: 学校实体类
required: true
schema:
$ref: '#/definitions/School'
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiResponse'
get:
summary: 返回学校列表
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiSchoolListResponse'
/school/{schoolId}:
put:
summary: 修改学校
parameters:
- name: schoolId
in: path
description: 学校ID
required: true
type: string
- name: body
in: body
description: 学校实体类
required: true
schema:
$ref: '#/definitions/School'
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiResponse'
delete:
summary: 删除学校
parameters:
- name: schoolId
in: path
description: 学校ID
required: true
type: string
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiResponse'
get:
summary: 根据ID查询学校
parameters:
- name: schoolId
in: path
description: 学校ID
required: true
type: string
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiSchoolResponse'
/school/search:
post:
summary: 根据条件查询学校列表
parameters:
- name: body
in: body
description: 学校实体类
required: true
schema:
$ref: '#/definitions/School'
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiSchoolListResponse'
/school/search/{page}/{size}:
post:
summary: 根据条件查询学校列表
parameters:
- name: page
in: path
description: 页码
required: true
type: integer
format: int32
- name: size
in: path
description: 页大小
required: true
type: integer
format: int32
- name: body
in: body
description: 学校实体类
required: true
schema:
$ref: '#/definitions/School'
responses:
200:
description: 成功响应
schema:
$ref: '#/definitions/ApiSchoolPageResponse'
definitions:
School:
type: object
properties:
id:
type: string
description: ID
name:
type: string
description: 学校名称
isPopular:
type: string
description: 是否热门
ApiResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
ApiSchoolResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
data:
$ref: '#/definitions/School'
SchoolList:
type: array
items:
$ref: '#/definitions/School'
ApiSchoolListResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
data:
$ref: '#/definitions/SchoolList'
ApiSchoolPageResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息
data:
properties:
total:
type: integer
format: int32
rows:
$ref: '#/definitions/SchoolList'
只给显示界面
下载swagger-ui
swagger-ui依赖nginx
下载nginx
使用
swagger-ui-master.zip,解压，将其中的dist目录中的全部文件，拷贝到nginx中的html目录中
运行
进入nginx目录cmd
start nginx.exe
访问
localhost：80
整合
导出文件
swagger Editor中选择Generate Client中选择swagger-yaml
导入swagger ui
将yaml文件拷贝到nginx的html目录中即可
搜索文件xxx.yaml
注意：文件后缀yaml和yml建议改成yml
mock.js
mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据
安装
cnpm install mockjs
快速体验
新建test.js文件
let mymock = require('mockjs');
letpers = mymock.mock({
'persons|10' :[{
'id':1,
'name':'zs',
'age':23
}]
});
console.log(JSON.stringify(pers,null,20));
运行
node test
语法
- DTD:数据模板定义规范
- DPD：数据占位符定义规范
DTD
'属性名|规则': 属性值
实例
'persons|10' :[{
'id':1,
'name':'zs',
'age':23
}]
规则：
属性值是字符串类型
字符串重复count次
属性名|count: 字符串 'name|10':'zs'字符串重复min-max中任意次
属性名|min-max: 字符串‘name|2-5’:‘zs’
–min-max代表次数
属性值是数字类型
递增任意数字
属性名|+1: 数字 'id|+1':1数字范围
属性名|min-max: 数字 --min-max代表范围 'id|10-20':0 代表数字类型没有任何意义(可变成任意数字)数字显示小数
属性名|min-max.x: 数字 --min-max代表范围 'id|10-20.2':0 10-20中任意数字两个小数位数字显示任意小数
属性名|min-max.a-b: 数字 'id|10-20.2-4':0 10-20中任意数字2-4任意的小数
属性值是布尔类型
相等出现概率
'sex|1':true 代表true出现的次数 和false 的概率是 1:1自定义出现概率
'sex|2-4':true 代表true出现的概率 是 2/2+4
属性值是对象object类型
对象类型是通过json格式写的
对象出现的个数
'属性|count':{k:v,k:v,k:v....} 'address|2':{'homeaddress':'西安','schooladdress':'北京','workaddress':'泸州'} 显示其中的任意两个出现min-max中任意个
'属性|min-max':{...} 'address|1-3':{'homeaddress':'西安','schooladdress':'北京','workaddress':'泸州'} 显示其中的任意1-3个
属性值是数组类型
出现指定次
'属性|count':[{}] 'persons|3' :[{ ...} }]出现min-max次
'属性|min-max':[{}] 'persons|1-6' :[{ ...} }]
DPD
产生随机数据
类型要加上@符号加上''
'name':'@cname',
'xing':'@cfirst',
'exing':'@Last',
注意： 属性名重复的话，后一个的值会覆盖前一个的值，出现的位置是在第一个的位置
实例
let mymock = require('mockjs');
let pers = mymock.mock({
'persons|1-6' :[{
'id|+10':1,
'name':'@cname',
'xing':'@cfirst',
'exing':'@Last',
'desc' : '@string',
'stuno':'@integer',
'birthday':'@date',
'pic':'@image',
'age|18-60':0 ,
'brief': '@title',
'content': '@cword(100)',
'height|160-180.2':0 ,
'weight|50-100.2-4':0,
'sex|2-3':true ,
'address|1-3':{'homeaddress':'西安','schooladdress':'北京','workaddress':'泸州'},
'url':'@url' ,
'ip':"@ip" ,
'email':'@email',
'area':'@region',
'address2':'@county(true)'
}]
/*
'persons|1-6' :[{
'id|+10':1,
'name|2-5':'zs',
'age|18-60':0 ,
'height|160-180.2':0 ,
'weight|50-100.2-4':0,
'sex|2-3':true ,
'address|1-3':{'homeaddress':'西安','schooladdress':'北京','workaddress':'泸州'}
}]
*/
});
console.log( JSON.stringify(pers ,null, 2) );
Easy mock
easy mock:在线Mock.js
- 内置了mock.js并且 暴露了url地址
- 同步swagger
模拟数据： 1. mock.js 模拟数据： 当请求url时，返回mock.js模拟的数据
- swagger模拟数据：根据yml中的请求url设置url,返回 response中定义的数据（类型是swagger定义的，而数据是easymock模拟出来的）-》模拟数据，并且有查询此数据的url【 url ->模拟数据】
使用
- 进入官网
- 创建项目
- 编写接口
使用swagger编写的yaml同步到easymock
获得yaml文件
进入easymock项目
设置
Swagger Docs API
上传yaml文件
保存
进入easymock项目点击同步Swagger
element ui
elementui:前端脚手架,vue组件组
很多三方组件 是基础是基于elementui进行了扩展。 举例：
- vue-admin-template
github上有详细的用法
根据github提示:
克隆项目（下载）
git clone https://github.com/PanJiaChen/vue-admin-template.git
进入项目目录
cd vue-admin-template
安装依赖
npm install
建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
启动服务
npm run dev
注意:
遇见错误Error: Cannot find module 'node-sass'解决办法
cnpm install node-sass --save
目录结构
- build 构建源码
- mock 模拟数据
public 首页
- favicon.ico网站图标
src 源码
api 前后端遵循的api接口
- assets 资源
- components 组件
- icons 图标
- router 路由
- utils 工具
- views 视图
.env.development 数据来源
修改数据来源，来源于easymock
base api VUE_APP_BASE_API = ‘https://www.easy-mock.com/mock/5d088992010742640520057f/myeasymock'
修改后需要重启
修改语言
进入src/main.js文件，修改成
import locale from 'element-ui/lib/locale/lang/zh-CN'
将本地数据 复制到 easymock中一份
修改数据源：
.env.development ：VUE_APP_BASE_APIrequest–response
先查看本地有什么数据(chrome-F12,network)
请求
Request URL(POST): http://localhost:9528/dev-api/user/login响应
{"code":20000,"data":{"token":"admin-token"}}请求
Request URL(GET): http://localhost:9528/dev-api/user/info （注意不要加?token=admin-token，定义接口时不需要传值，在请求时才传值）响应
{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"lx"}}复制到easy mock
在easy中定义请求和响应
源码
router:路由器
views:视图
api：调用接口
前端开发
请求xxx ->router("xxx")->views(<template>html搭建,<script>js)->调用（api）->url(参数)->Easy Mock[swagger(yml，类型+变量名，String id)+mock.js(DPD @string)] )
后台开发：
请求xxx->@RequestMapping("xxx")->service ->dao ->db 动态从数据库中查
请求xxx->@RequestMapping("xxx")->service :return "abc" 硬编码
实例 简单的查询
.vue/.js模块化编程：
import
..
export
请求xxx ->router("xxx")->views(<template>html搭建,<script>js)->调用（api）->url(参数)->Easy Mock[swagger(yml，类型+变量名，String id)+mock.js(DPD @string)] )
views
新建文件夹、文件myactivity/activity.vue
编写代码
<template> <div> <el-table :data="activitiesData" stripe style="width: 100%"> <el-table-column prop="id" label="编号" width="130"> </el-table-column> <el-table-column prop="name" label="活动名" width="130"> </el-table-column> <el-table-column prop="starttime" label="开始时间"> </el-table-column> <el-table-column prop="state" label="状态"> </el-table-column> </el-table> </div> </template> <script> import activityApi from '@/api/activity' export default{ //获取easy mock中的模拟数据 ;变量 data(){ return { //查询easymock时 传入的参数（活动对象） activityData : {}, //封装活动信息：id, } } , /* created():初始化方法 -> 加载数据 initActivities(); data()：为了给 <templete>里的table填充值 */ //初始化方法 created(){ this.initActivities(); }, methods:{ initActivities(){ activityApi.getActivitis().then(response=>{ //将easy mock中查询的活动数据 赋值给activitiesData this.activitiesData = response.data ; } ); } } } </script> <style scoped> </style>
api
新建文件activity.js
import request from '@/utils/request'
//activity
export default
{
//请求easy mock，获取活动列表数据
getActivitis(){
return request({
url: '/yq/activity',
method: 'get'
})
}
}
easymock
编写请求和响应
{
"code":20000,
"flag":true
'message" "@string"，
"data|10":[{
"id|+1": 1，
“name": "@cword"
”summary" :
"@cword(6,10)" ,
"detail": "@cword(16,20)"，
”sponsor":' ”@string" ,
”image": "@string" ，
'starttime": "@date"，
”endtime":" @date" ,
"address": "@string",
enrolltime": "@string" ，
"state":" @string ，
'school": "@string"
}]
}
code的值必须是20000
编写router路由
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: '示例', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/myactivity/activity'),
meta: { title: '活动', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
}
实例–分页
easymock
'code": 20000 ,
"flag": true,
"message":"带分页的查询",
data": {
"total": 109,
"rows|10": [{
id|+1": 1,
”name”:
"@cnpme"，
summary": "@string" ，
detail": @string",
"sponsor": "@string" ,
' image":" @string" ,
starttime":' "@string" ,
”endtime":” @string" ,
”address": "@string
”enrolltime": "@string" ,
"state": "@string" ,
”school": "@string
}]
}
数据的形式：
- response.data.total :总数据量
- response.data.rows:每页的数据量
api
initActivitiesByPage(currentPage,pageSize,activityQueryData){
//currentPage:当前第几页 pageSize：每页的数据量
return request({
url: `/yq/activity/queryActivitiesByPage/${currentPage}/${pageSize}`,
method: 'post',
data: activityQueryData //时间、名称
})
},
Vue
//带分页：查看当前页的数据
initActivitiesByPage(){
activityApi.initActivitiesByPage(this.currentpage,this.pagesize,this.activityData ).then(response=>{
this.total = response.data.total ;//109
this.activitiesData = response.data.rows ;
})
}
<div class="block">
<span class="demonstration">分页</span>
<el-pagination
@current-change ="initActivitiesByPage"
@size-change= "initActivitiesByPage"
:page-sizes="[10,20,30]"
:page-size="pagesize"
:current-page="currentpage"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
具体的代码放到百度网盘中了，自行下载；
提取码：abnl
Nuxt入门
nuxt：服务器渲染技术
ajax ->服务端->ajax
服务端->客户端
服务端渲染优势：SEO ,提高网站的搜索排名 ， 爬虫 ：特点，不认识js（ajax就是js）
下载运行
下载nuxt的模板代码starter-template
安装依赖
npm install
修改package.json中的占位符{{name}}
"name": "studynuxt",
运行
npm run dev
访问
localhost:3000
源码
- assets 静态资源
- components 组件
- static 静态图标
- pages 页面
- layouts 页面布局
layouts
页面布局三个部分
<template>
<div>
<header>头部</header>
<nuxt/>
<footer>尾部</footer>
</div>
</template>
pages
页面
映射时，默认的文件名：index.vue
映射目录“/”：代表的 pages目录
<router-link to="/userinfo">
有两种可能： 1. pages/userinfo/index.vue 2. pages/userinfo.vue
通过axios进行渲染
axios
下载
cnpm install axios --save
share
–分享 share.js
引入。
https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css编写DIV
<div class="social-share" ></div>完整性
https://blog.csdn.net/liwenfei123/article/details/78952337 data-title data-description data-sites ：['qzone', 'qq', 'weibo','wechat', 'douban'] data-url data-xxx
代码
提取码：a3xs
