大前端相关-nodejs到vue
一、前言
目前常说前后端分离，前端也有一堆神奇的技术，一些本来只有后端能做的事，前端也可以做了(如连接数据库)。面对一些小的系统，前端工程师就可以搞定整个系统。以前学的jsp啥的好像都没啥实际用了。这里以Node.js为入口，简单学习一下大前端。
二、vscode安装
1.安装
直接去官网下载vscode
vscode官网
百度百科：
Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。
2.vscode简单操作
CTRL+P 搜索(配置/...)
>Configure Display Language 切换语言配置 在搜索中输入(后面一样)
>font 字体大小等设置
或者：
文件-->首选项-->设置-->font 大概中间有关font size 直接调整
文件-->首选项-->设置-->emment 打开TAB自动补齐(默认打开)
！ ！自动生成基本html格式
三、Node.js
1.安装
安装自己的电脑需求在官网下载：官网
傻瓜式安装，自动配置环境变量，并且现在集成了npm。
2.测试安装成功
直接在cmd终端中输入：
node -v 查看版本号---测试是否安装成功
npm -v 查看包管理器版本(npm包管理器，后面说)
很多安装都可以用 -v 或者 -version 查看版本来检验安装是否成功
3.简单使用
用vscoe新建httpserver.js文件–网页响应
//导入模块是require就类似于import java.io
const http=require("http");
//1.创建一个httpserver服务
http.createServer(function(request,response){
//浏览器怎么认识hello server!!
//下面这行告诉浏览器将以text-plain(文本)去解析hello server这段数据
response.writeHead(200,{
'Content-type':'text/html'});//text/html是html格式(即<strong>会翻译成标签)
//给浏览器输出内容
//2.监听一端口8888
response.end("<strong>hello server!</strong>");
}).listen(8888)
console.log("你启动的服务是:http://localhost:8888已启动成功");
//3.启动服务 终端输入node httpserver.js
//4.在浏览器访问http://localhost:8888
4.前端连接数据库
终端输入:nmp install mysql —— 安装nodejs的mysql操作模块
安装完会出现node_modules,package-lock.json,package.json 三个文件
新建db.js文件
//导入mysql依赖包，mysql属于第三方的模块就类似于java.sal
var mysql=require("mysql");
//1.创建一个mysql的Connection对象
//2.配置数据连接的信息
var connection=mysql.createConnection({
host:"127.0.0.1",
user:"root",
port:3306,
password:"root",
database:"testdb"//连接testdb数据库
});
//3.开辟连接
connection.connect();
//4.执行curd
connection.query("select * from _user",function(error,results,fields){
//如果查询出错，直接抛出
if(error)throw error;
//查询成功（网页打开console查看数据）
console.log("results = ",results);
});
//5.关闭连接
connection.end();
//最后一步：运行node db.js查看效果
四、ES6语法
1.ES6是什么
之前写html，jsp的var 什么什么的都是ECMAScript5语法，如果用idea写过，应该会发现idea总是想让你把var换成let或者const。ECMAScript6是大前端必须会的。这里简单介绍学习。
百度百科：
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。
2.let和const
代码只有<body>部分，使用！自动生成的模板
<script>
//传统定义变量和常量的方式 统一使用var
var name="张三";
var link="https://www.baidu.com";
var PI=Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义方式
let name2="李四";
let link2="https://www.baidu.com";
//定义常量
const PI2=Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>
<script>
//let 和const解决var的变量穿透问题，和常量修改的问题
for(var i=0;i<5;i++){
console.log(i);
}
//变量穿透,输出5，let会报错
console.log(i);
//var定义常量可以被修改，const定义的常量修改会报错
var PI=Math.PI;
PI=100;
console.log(PI);
//在实际开发和生产中，如果是小程序，unipp或者是一些脚手架中，可以大胆的去使用let和const
//但是如果在web开发中，建议还是使用var，因为在一些低版本的浏览器还是不支持let和const
</script>
3.模板字符串
<script>
//字符串会牵涉到动态部分
var person={
name:"张三",
address:"天津码头",
target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);
//ES6的模板字符串语法
let address2=`ES6--我是${
person.name}，在${
person.address}抬货到${
person.target}`;
console.log(address2);
</script>
4.函数默认参数
<script>
//函数默认参数
function sum(a,b){
return a+b;
}
var result=sum(100,200); //300
var result=sum(100); //NaN ---sum(100,undefined);
console.log("result = "+result);
//但是可以在定义函数给默认值解决这个问题
function sum2(a=100,b=200){
return a+b;
}
var result=sum2(400); //600
console.log("result = "+result);
</script>
5.箭头函数
<script>
//箭头函数 - 重点(在未来的项目开发中：比如小程序，unipp，一些常见的脚手架大量使用)
//原来函数
var sum=function(a,b){
return a+b;
}
//箭头函数改进--1
var sum2 = (a,b)=>{
return a+b;
}
//箭头函数改进--2
var sum3= (a,b)=>a+b;
console.log(sum(100,200));
console.log(sum2(100,200));
console.log(sum3(100,200));
//通过上面的列子找到的规律
//1：去掉function
//2.在括号后面加箭头
//3.如果逻辑代码中仅有return可以直接省去。(如果有逻辑体，就不能省略)
//4.如果参数只有一个，括号也可以省去（自然多个参数必须加括号）
var sum4 = (a,b) =>{
var num=a+b;
return num;//不能省略
}
//var sum5 = (a,b)=>a+b;
//例子
var arr=[1,2,3,4,5,6];
var arrNew=arr.map(function(obj){
return obj*2;
});
console.log(arrNew);
//箭头函数简化
var arrNew2=arr.map(obj=>obj*2);
console.log("箭头函数简化数组乘二："+arrNew2);
</script>
6.对象初始化简写及案例分析
<script>
//原本
var info={
title:"天津狗不理",
goods:"包子",
go:function(){
console.log("卖包子");
}
};
console.log("原本对象"+info);
//es6简写
//对象是key:value
//如果key和变量名一致，可以只定义一次
//如果value是一个函数，可以把`:function`去掉，只剩下()即可
var title="天津狗不理";
var goods="包子";
let info2={
title,
goods,
go(){
console.log("卖包子");
}
};
console.log("ES6简写对象:"+info2);
console.log("ES6简写对象:"+info2.title);
console.log("ES6简写对象:"+info2.goods);
console.log("ES6简写对象:"+info2.go());//这里会先执行info2.go()，下一行返回ES6简写对象:undefined
</script>
例子：
<form action="">
<p>账号：<input type="text" id="account"></p>
<p>密码：<input type="text" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
$("#loginbtn").onclick(function(){
var account=$("#account").val();
var password=$("#password").val();
//执行异步请求
// $.ajax({
// type:"post",
// url:"xxx",
// data:{account:account,password:password},
// success:function(){
// }
// });
//简写
var params={
account,password};
$.ajax({
type:"post",
url:"xxx",
data:params,
success(){
}
});
});
</script>
7.对象解构
<script>
//对象key:value存在,获取对象属性和方法的方式有两种
//1.通过.
//2.通过[]
var title="天津狗不理";
var goods="包子";
let info2={
title,
goods,
go(){
console.log("卖包子");
}
};
console.log("通过.方式--------------------");
//通过.
console.log(info2.title);
console.log(info2.goods);
info2.go();
console.log("通过[]方式-----------------");
//通过[]的方式
console.log(info2["title"]);
console.log(info2["goods"]);
info2["go"]();
console.log("ES6获取属性和方法的方式-----------------");
//ES6获取属性和方法的方式(es6对象解构--其实就是快速获取属性和方法的一种形式)
var {
title,goods,go}=info2;
//还原代码
// var title=info2.title;
// var goods=info2.goods;
console.log(title,goods);
go();
</script>
8.对象传播操作符
<script>
//对象传播操作符...
var person={
name:"张三",
address:"天津码头",
evetnt:"抬杠",
nickname:"钢三",
go(){
console.log("抬杠抬到力能扛鼎");
}
};
//解构
var {
name,address,...person2}=person;
console.log(name);
console.log(address);
console.log(person2);
</script>
<script>
//java----后台
//数据格式: var userPage={pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};
//异步请求
//$.post("/user/search",funtion(res){
var userPage={
pages:10,user:[{
},{
}],pageNo:1,pageSize:100,total:100};
var {
users,...userPage2}=userPage;
// })
</script>
9.数组Map
<script>
//要对arr数组每个数组*2
let arr=[1,2,3,4,5,6,7];
//传统方式
let newarr=[];
for(let i=0;i<arr.length;i++){
newarr.push(arr[i]*2);
}
console.log(newarr);
//map
let newArr2=arr.map(ele=>ele*2);
console.log("map实现数组*2:"+newArr2);
//map处理对象的数据
var user=[{
age:10,name:"珂赛特"},{
age:10,name:"洛丽塔"},{
age:18,name:"吉普赛"}];
let newUser=user.map(function(ele){
ele.age +=1;
return ele;
});
// let newUser=user.map(ele=>ele.age += 1);//这个只返回年龄
console.log(newUser);
</script>
10.数组reduce
<script>
let arr=[1,2,3,4,5,6,7,8,9,10];
let result=arr.reduce((a,b)=>a+b);
console.log("result:"+result);
//原理：a=1 b=2 result=3
//a=3 b=3 result=6
//....
//a=45 b=10 result=55
</script>
11.nodejs和<\script>
新建01.js文件，随便拿上面一个代码放入
//字符串会牵涉到动态部分
var person={
name:"张三",
address:"天津码头",
target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);
//ES6的模板字符串语法
let address2=`ES6--我是${
person.name}，在${
person.address}抬货到${
person.target}`;
console.log(address2);
在终端运行:
node .\01.js
结果一致
html中<script>中的语法函数可以直接用在nodejs中
五、npm
1.介绍
npm相当于后端的Maven
NPM:Node Package Manager
所以也有对应的仓库：在官网直接搜索就行
https://www.npmjs.com/
2.作用
1、快速构建nodejs工程
2、快速安装和依赖第三方模块。比如：npm install mysql redis等
3.初始化项目
终端运行：>npm init 初始化
名称默认回车
版本：可以自己指定eg:1.0.1
描述：我是一个node工程
入口函数：默认index.js回车就行
测试命名---不需要回车就行
仓库地址(git repository)---如果不需要回车就行
关键词 自定义node
作者 自定义person
回车确认
得到package.json文件，这个文件内容如下：
{
"name": "3npmpro", //工程名
"version": "1.0.1", //版本
"description": "我是一个node工程", //描述
"main": "index.js", //入口js
"scripts": { //运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"node"
],
"author": "person", //开发者
"license": "ISC" //授权协议
}
类似于pom.xml文件作用管理依赖
我们测试时也可以直接在终端输入npm init -y来默认初始化
4.安装使用卸载模块介绍
快速安装和依赖第三方模块
终端:
npm init -y 全部默认参数完成初始化(生成package.json)
npm install mysql (node_modules和package-lock.json)(mysql在node_modules下的mysql)
npm i redis (redis也在在node_modules下)
快速安装依赖第三方模块？
npm install xxx 或者 npm i xxx 模块名
安装模块放在项目的node_moudules文件夹中
使用模块:
- require
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");
xx.js文件：
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");
const client =redis.createClient();
client.on("error",function(error){
console.error(error);
});
client.set("key","value",redis.print);
client.get("key",redis.print);
卸载模块：
npm uninstall vue jquery
5.package.json文件
package.json文件：
"dependencies": {
"mysql": "^2.18.1",
"redis": "^3.1.2"
}
通过npm install xxx下载的依赖会记录在package.json这个文件中，就类似于maven中pom.xml
记录的作用：复用
如果创建新的工程，可以将package.json这个文件复制到新的目录下，然后打开当前目录的cmd，输入 " npm install "即可下载package.json记录的所有配置
6.cnpm
和Maven一样，仓库在国外，国内下载慢。
可以使用国内淘宝镜像cnpm:
安装：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看cnmp版本信息
6-2安装cnpm出现错误
如果出现以下错误：
C:\Users\Lenovo\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。
解决方案：
1.在win10 系统中搜索框 输入 Windows PowerShell，选择 管理员身份运行
2.使用，win+R打开了powershell命令行之后,输入set-ExecutionPolicy RemoteSigned，
然后更改权限为A，最后通过 get-ExecutionPolicy 查看当前的状态
总结:powershell打开后输入：set-ExecutionPolicy RemoteSigned 回车;A 回车;get-ExecutionPolicy 回车。
六、babel
1.介绍及作用
作用：用来改换es配置(很多浏览器配置不够高，可以用来把es6转码成es5)
2.安装
cmd终端输入：
cnpm install -g babel-cli 安装(-cli默认安装到c盘)
babel --version 查看版本
3.使用
新建文件夹，终端输入：
npm init -y 初始化
新建文件 /src/example.js(待转码文件)
//es6
let name = "张三";
const address = "西安";
let arr=[1,2,3,4,5];
let newArr=arr.map(a=>a*2);
console.log(name);
console.log(address);
console.log(newArr);
在根目录下创建.babelrc文件(babel配置–要转化成什么版本——这里时es2015)
{
"presets":["es2015"],
"plugins": []
}
终端执行：
babel src -d dist
这里一般会出现错误:
Couldn’t find preset “es2015” relative to directory “E:\XXX\XXX\5babel”
是因为没有安装es2015
终端执行：
cnpm install babel-preset-es2015 --save-dev
出现node_modules 文件
再次执行转化：
babel src -d dist
(出现dist/example.js(es2015版))(把src下的文件转码到dist文件下)
转码后js文件：
"use strict";//使用严格模式，严格模式下你不能使用未声明的变量。
//es6
var name = "张三";
var address = "西安";
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (a) {
return a * 2;
});
console.log(name);
console.log(address);
console.log(newArr);
ps:新项目安装也是把package.json复制到新文件夹执行：npm install
4.自定义脚本
这里简单提一下自定义脚本，我们之后从网上下项目，一般都是终端输入npm run dev运行项目，就是因为自定义脚本。
在package.json文件中添加脚本:
源文件：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
修改后：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"babel src -d dist"
},
终端执行:
npm run dev
自动执行
七、模块化
1.介绍
前端越来越复杂，所以也产生了类似java包(import)的机制，及模块化规范。这里提一下CommonJS模块化规范和ES6模块化规范
2.CommonJS模块化规范
导出文件：
//工具类
const sum = ((a,b)=>a+b);
const sub = ((a,b)=>a-b);
const mul = ((a,b)=>a*b);
const di = ((a,b)=>a/b);
//如何导出给别人使用
module.exports={
sum,
sub,
mul,
di
}
导入测试(类似java的import类，导入后就可直接使用):
//require
const m=require('./四则运算.js');
console.log(m.sum(4,2));
console.log(m.sub(4,2));
console.log(m.mul(4,2));
console.log(m.di(4,2));
3.ES6模块化规范(常用)
新建文件 src/userApi.js(导出文件):
export function getList(){
//在真实业务中，异步获取数据
console.log("获取数据列表");
}
export function save(){
//在真实业务中，异步获取数据
console.log("保存数据");
}
新建文件 src/userTest.js(导入测试文件):
import {
getList,save} from './userApi.js'
getList();
save();
//默认不支持es6语法
如果执行userTest报错
<!-- import {getList,save} from './userApi.js'
^^^^^^
SyntaxError: Cannot use import statement outside a module -->
//默认不支持es6语法
解决方法：
npm init -y 先初始化
新建.babelrc文件 转码配置
cnpm install babel-preset-es2015 --save-dev 安装es2015依赖
在package.json文件新建脚本
"build":"babel src -d dist"
终端:npm run build
node .\dist\userTest.js 成功运行
4.es6的常见写法(3的改进版)
新建文件 src/userApi.js(导出文件):
export default{
getList(){
//在真实业务中，异步获取数据
console.log("获取数据列表");
},
save(){
//在真实业务中，异步获取数据
console.log("保存数据");
}
}
新建文件 src/userTest.js(导入测试文件):
import user from './userApi.js'
user.getList();
user.save();
八、Webpack
1.介绍
Webpack 是一个模块打包器，可以将多种静态资源js,css,less转换成一个静态文件，用于展示你的内容。
2.安装
cnpm install -g webpack webpack-cli
webpack -v 查看版本
3.测试js打包步骤
测试：在src/文件夹下- main.js导入util.js和common.js文件
1》创建一个nodejs项目 npm init -y
2》创建一个src目录
3》在src存放两个需要合并的util.js和common.js
util.js文件：
//相加函数
exports.add=(a,b)=> a+b;
//动态增加的相减函数
exports.minus=(a,b)=> a-b;
common.js文件:
//输出例子
exports.info=function(str){
console.log(str);
document.write(str);
}
4》准备一个入口文件main.js,其实就是模块集中进行引入
main.js文件：
//导入util和common
const util =require("./util");
const common =require("./common");
common.info("Hello World ,"+util.add(100,100));
document.write("<br />")
common.info("Hello World ,"+util.minus(100,50));
5》在根目录下定义个webpack.config.js文件配置打包的规则
//导入path模块"path"是nodejs的内置模块
const {
dirname } = require("path");
const path=require("path");
//定义JS打包的规则
module.exports={
//入口函数：从哪里开始进行编译打包
entry:"./src/main.js",
//编译成功以后把内容输出到哪里去
output:{
//定义输出指定目录 __dirname当前目录根目录，产生一个dist文件
path:path.resolve(__dirname,"./dist"),
//定义合并的文件名
filename:"bundle.js"
}
}
6》执行webpack查看效果
终端输入:
webpack 打包开始
webpack -w 动态监视打包
4.测试Css打包
老版本Webpack本身默认只能处理JavaScript模块，如果要处理其它类型的文件，就需要使用loader进行转化
PS：********现在版本好像已经可以直接打包css了
和main.js同级目录新建任意style.css文件
body{
background: yellow;
}
1》先安装相关loader插件
cnpm install --save-dev style-loader css-loader
2》在webpack.config.js中进行配置
//导入path模块"path"是nodejs的内置模块
const {
dirname } = require("path");
const path=require("path");
//定义JS打包的规则
module.exports={
//入口函数：从哪里开始进行编译打包
entry:"./src/main.js",
//编译成功以后把内容输出到哪里去
output:{
//定义输出指定目录 __dirname当前目录根目录，产生一个dist文件
path:path.resolve(__dirname,"./dist"),
//定义合并的文件名
filename:"bundle.js"
},
module:{
rules:[{
test:/\.css$/, //把项目中所有的.css结尾的文件打包
use:["style-loader","css-loader"]
}]
}
}
3》main中导入css
require("./style.css");
4》执行webpack
九、Vue-element-admin
简介(官方)：
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
下载源码：源码地址
预览：预览地址
简单看看就行，后面会单独写一篇关于vue的。