大前端
Node.js代码的运行
创建的文件是 name.js
运行是 node name.js
Node.js
//链接http创建server服务
可以在Node.js API查看模块
所有的javascript代码都可以运行在Node.js中
//导入模块是require就类似于import java.io
const http = require('http')
//1.创建一个httpserver服务
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
//告诉浏览器将,以text/pain去解析hello server这段数据
response.writeHead(200, {'Content-Type': 'text/plain'})
// 发送响应数据 "Hello World"给浏览器解析
response.end('Hello Server')
}).listen(8888)
//2.监听端口8888
//3.启动运行服务 node httpserver.js
//4.在浏览器访问http://localhost:8888
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/')
//链接mysql
有些模块在Node.js API文档里面找不到。
我们在npm里面找到下载命令。
使用命令下载
npm install mysql
//1.导入mysql依赖包,mysql属于第三方模块,就类似于java.sql一样的道理.安装 npm install mysql
var mysql = require("mysql");
//1.创建一个mysql的Connection对象
//2.配置数据库链接
var connection = mysql.createConnection({
host:"127.0.0.1",
port:3306,
user:"root",
password:"*******",
database:"ahtcm"
});
//3.开辟链接
connection.connect();
//4.执行curd
connection.query("select * from emp",function(error,results,fields){
//如果查询出错,直接抛出错误
if(error) throw error;
//查询成功
console.log("results=",results);
});
//5.关闭链接
connection.end();
Es6语法
let和const
let是具有局部属性的,以前使用var都是全局的,出了代码块还能使用
const:常量,修饰的不能更改。
模板字符串
在html里
<script>
var person = {
name:"wwy",
addr:"合肥"
}
let string = "我是"+person.name+",我住在"+person.addr;//以前的字符串拼接
//es6模板字符串
let newS听听 = `我是${person.name},我住在${person.addr}`
</script>
函数默认参数与箭头函数
//默认参数
<script>
function sum(a,b){//当不传实参的话默认给a=undefined; b=undefined;
return a+b;
}
var result = sum(1,2);
</script>
//箭头函数
<script>
var sum = (a,b)=>{
return a+b;
}
//改进
var sum = (a,b)=>a+b;
//规律
//1.去掉function
//2.在括号后面加箭头
//3.如果仅仅只有一个return可以直接省略花括号。
var arr = [1,2,3,4,5,6];
var newarr = arr.map(function(obj){
return obj*2;
});//旧方法给数组中每个元素*2
var newarr = arr.map((obj)=>obj*2);//箭头函数修改后
</script>
对象初始化简写
//原始
<script>
var person = {
name:"wwy",
age:18,
addr:"合肥"
say:function(){
console.log("我好帅!");
}
}
//es6简写(因为对象是key:value存在)
//1.如果key和变量的名字一致,可以指定定义一次即可
//2.如果value是一个函数,可以把‘:function’去掉,只剩下()即可
var name = "zzz";
var age = 21;
var addr = "北京";
var person = {
name,
age,
addr,
say(){
console.log("修改后,我还是好帅!");
}
}
</script>
对象简写的应用
<form action="" methond="post">
用户名<input type="text" id = username name = username/>
密 码<input type="password" id = password name = "password"/>
<input type = "button" value = "登录" id = "loginbtn"/>
</form>
<script>
$("#loginbtn").on("click",function(){
var account = $("#username").val();
var pwd = $("#password").val();
//对象简写
//var params = {username:account,password:pwd};
var params = {account,pwd};
//异步请求
/*$.ajax({
type:post,
url:"xxxx",
data:params,
success:function(){
}
});*/
$.ajax({
type:post,
url:"xxxx",
data:params,
success(){
}
});
});
</script>
对象结构
<script>
var name = "zzz";
var age = 21;
var addr = "北京";
var person = {
name,
age,
addr,
say(){
console.log("修改后,我还是好帅!");
}
}
//通过 . 的方式
console.log(person.name);
console.log(person.age);
console.log(person.addr);
person.say();
//通过 [] 的方式
console.log(person["name"]);
console.log(person["age"]);
console.log(person["addr"]);
person["say"]();
//es6对象结构 - 其实就是快速获取属性和方法的方式一种形式
var {name,age,say} = person;
//还原代码
var name = person.name;
var age = person.age;
var say = person.say();
</script>
传播操作符【…】
<script>
var name = "wangwenyong";
var age = 18;
var addr = "杭州";
var person = {
name,
age,
addr,
say(){
consol.log("真帅!");
}
}
//结构另一个对象出来
var {name,age,...person2} = person;
console.log(name);
console.log(age);
console.log(person2);//除了name和age其它都有。
</script>
数组 map和reduce方法使用(了解)
//map
<script>
//要求arr数组每个元素*2
let arr = [1,2,3,4,5,6];
//传统方式
let newarr = [];
for(let i=0;i<arr.lenth;i++){
newarr.push(arr[i]*2);
}
//使用map
var newarr2 = arr.map(function(ele){
return ele*2;
});
//修改
var newarr3 = arr.map(ele=>ele*2);
//真实案例
var users = [{name:"张三",age:10},{name:"李四",age:11},{name:"王五",age:12}];
var newusers = user.map(ele=>{
ele.age = ele.age+1;
return ele;
});
</script>
//reduce
<script>
var arr = [1,2,3,4,5,6,7,8,9];
//a=1 , b=2
//a=3 , b=3
//a=6 , b=4 ........
var result = arr.reduce(function(a,b){
return a+b;
});
</script>
//result就是arr数组的和
Npm包管理器
npm: node package manager ,node包管理器,类似于maven
作用:1.快速构建node.js工程 (-npm init -y) 产生:package.json文件,记录一些工程信息,
2.快速安装和依赖第三方模块。比如npm install mysql redis rabbitmq 等等。工具是下载到文件夹node_modules
并且在package.json文件的“dependencies”里面标注。
3.一个别人的新的工程导入库,我们可以在含有package.json目录里面输入npm install就可以根据package.json文件一次性将所需要库导入。
{
"name": "testpackage",
"version": "1.0.0",
"description": "测试构建一个node项目",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"ahtcm"
],
"author": "wwy",
"license": "ISC"
}
修改镜像地址(使用阿里云仓库,使得下载更快)
#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
下载各种版本的模块
npm install 模块名称@版本号
卸载模块
npm uninstall 模块名称
Babel
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。Bable就是将ES6代码转化为ES5代码
Babel的安装与检查版本
#babel安装
npm install -g babel-cli
#查看babel版本
babel --version
详细步骤
1.建立文件夹
2.npm init -y
3.创建src,并且创建一个code.js文件
4.在根目录创建一个 .babelrc的文件。里面写入想要转换的版本
{
"presets":["es2015"],
"plugins":[]
}
5.在根目录安装转换器
npm install --save-dev babel-preset-es2015
6.装好后就可以转换了。(在根目录)
babel src -d dist
自定义脚本配置,一键转化
7.改写package.json
{
"script":{
"dev":"babel src -d dist"
}
}
注意:如果这里面还有语句记得要加,隔离开来。不然会报错(package.json must be actual JSON, not just JavaScript.)
8.转码的时候,执行下面的命令(在根目录)
npm run dev
模块化管理
CommonJS模块化规范
ES6模块化规范
ConmmonJS规范
封装四则运算工具类(ArithmeticUtil.js)
//java中叫工具类
const sum = function(a,b){
return a+b;
}
const sub = function(a,b){
return a-b;
}
const mul = function(a,b){
return a*b;
}
const di = function(a,b){
return a/b;
}
//导出给别人使用就好了
module.exports = {
sum,
sub,
mul,
di
}
使用工具类
//导入四则运算
const m = require('./ArithmeticUtil.js')
//想要在外面使用,必须保证方法已经被导出
console.log(m.sum(1,2));
console.log(m.sub(1,2));
console.log(m.mul(1,2));
console.log(m.di(1,2));
ES6规范
使用export导出模块(UserAPI.js)
export function getList(){
//在真实业务中,异步数据获取数据
console.log("获取数据列表");
}
export function save(){
//在真实业务中,异步获取数据
console.log("保存数据");
}
使用import导出模块
import {getList,save} from './UserAPI.js'
getList();
save();//默认不支持 es6 语法的 import。( Cannot use import statement outside a module )
改进
UserAPI.js
export default{
getList(){
console.log("获取数据列表");
},
save(){
console.log("保存数据");
}
}
使用
import user from './UserAPI.js'
user.getList();
user.save();
Webpack打包编译
Webpack:前端资源加载 / 打包工具。
安装以及查看版本
#全局安装
npm install -g webpack webpack-cli
#查看版本
webpack -v
详细步骤
1:创建nodejs项目 npm init -y
2:创建src目录
3:在src存放俩个需要合并的util.js(工具类)和common.js(用户管理类)
4:准备一个入口文件 main.js,其实就是把模块集中进行引入
5:在根目录下定义个webpack.config.js文件配置打包的规则
6:执行webpack查看效果
webpack合并js
src
//util.js
//相加函数
exports.add = (a,b) => a+b;
//common.js
//输出
exports.info = function(str){
//往控制台输出
console.log(str);
//往浏览器输出
document.write(str);
}
//main.js
//导入util
const util = require("./util");
//导入common
const common = require("./common");
common.info("100+200="+util.add(100,200));
在根目录创建文件:webpack.config.js
//导入path模块 nodejs内置模块
const path = require("path");
//定义JS打包的规则
module.exports = {
//1:入口函数从哪里开始进行编译打包
entry:"./src/main.js",
//2:编译成功以后把内容输出到哪里去
output:{
//2-1:指定输出的目录,__dirname:当前项目的根目录,产生一个dist文件夹
path:path.resolve(__dirname,"./dist"),
//2-2:最终合并的js文件存储在dist/bundule.js文件中
filename:"bundle.js"
}
}
webpack对css打包
webpack本身只能处理javascript,如果需要处理其他文件就需要使用loader进行转换。所以必须安装style-loader和css-loader
css-loader:是将css装载到javascript
style-loader:是让javascript认识css
npm install --save-dev style-loader css-loader
修改webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{
//其他配置
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
在src文件夹创建style.css
body{
background:pink;
}
修改main.js,在第一行引入style.css
require('./style.css');
运行编译命令
webpack -w 可以运行后一直监听
npm run dev 写好了脚本