Node.js
编写服务端网址
const http = require("http");
http.createServer(function(request,response){
//浏览器以什么样的方式去识别hello,world
response.writeHead(200,{"Content-type":'text/html'});//以text/html去识别hello,world,
//如果是text/plain就会打印带标签的文字
//给浏览器输入内容
response.end("<strong>hello,world</strong>")
}).listen(8888) //监听一个端口8888
console.log("你启动的服务是http://localhost:8888")
操作数据库mysql
首先安装外部第三方模块mysql
npm install mysql
//1:导入mysql依赖包,类似java.sql
const { throws } = require("assert");
const { connect } = require("http2");
//2:创建一个mysql的连接对象
var mysql = require("mysql")
//3:配置数据库的信息
var connection = mysql.createConnection({
host:"127.0.0.1",
user:"root",
port:3306,
password:"root",
database:"go_test"
});
//4:开辟连接
connection.connect();
//5:执行curd命令
connection.query("select * from user",function(error,result,fields){
//如果异常,抛出
if(error)throw error;
//查询成功
console.log("result:",result)
})
//6:关闭连接
connection.end();
//运行db.js
let和const
最开始只有var定义变量,因为var会造成变量穿透,而后出现了let和const
变量穿透就是i还会被读到,i为5,for里的var作用域 外面也能收到,换成let就不会出现这个问题了。
模板字符串
类似格式化fmt.printf的作用
使用person的名字是${person.name}
箭头函数
取对象字段,方法的方式
对象传播操作符…
类似继承,将除了name,address的属性给了person2
数组map
数组reduce
将数组里的元素迭代相加
npm
类似java2个作用,
1,快速构建项目 npm init,会让你填各种信息,名称描述等,npm init -y默认参数安装
2,快速安装和依赖第三方模块,如npm install mysql redis 等到node_models,指定版本号加@
构建后会生成package.json文件,可以进行复用,将此文件拖走后,直接执行npm install就可以下载依赖中的文件,不直接拷贝node_models的原因是源文件过大,混乱文件过多
安装第三方包过慢的话,安装国内阿里云cnpm插件。
npm install -g cnpm --registry=https://registry.npm.taobao.org
卸载npm uninstall mysql redis
babel
有时候es6在nodejs环境中无法运行,可以用babel给es6降级为es5
安装命令 npm install -g babel-cli
要搭配转换器,安装转换器命令,
1.创建babel文件夹
2.初始化项目npm init -y
3.创建文件src/xxx.js
4.配置.babelrc
{
"presets": ["es2015"],
"plugins": []
}
5.安装转换器 cnpm install --save-dev babel-preset-es2015这条命令在系统shell下执行,不能在vscode里执行,不然会报错
6.执行babel命令 babel src -d dist 将src目录下的文件转码后放到dist目录下
图片里的dev对应的命令,可以用npm run dev来进行执行。
模块化开发
类似java的导包,可以将代码封装成工具类,供其他人使用。
common.js模块
1.先创建一个a.js文件,使用module.exports ={}进行方法导出。
//工具类
let sum = function(a,b){
return a+b
}
let sub = function(a,b){
return a-b
}
//导出给其他人使用
module.exports={
sum,
sub
}
2.在创建一个b.js文件使用a里的方法。
//导入
var m = require("./a")
var a=m.sum(1,2)
var b=m.sub(1,2)
console.log(a,b)
ES6模块化
老版:
1、首先创建一个userApi.js里面搭配export写2个方法,
export function getList(){
console.log("获取列表")
}
export function save(){
console.log("保存")
}
2、在创建一个userTest,import导入userApi里的方法
import {getList,save} from './userApi'
getList()
save()
3、由于默认不支持es6的import语法,所以需要利用babel进行降级处理
4、操作为 先npm init -y将所在文件变成nodejs文件,然后创建.babelrc,在packjson里设置命令,
“build”: “babel src -d dist”
5、执行npm run build
新版
1、
export default {
getList(){
console.log("获取列表")
},
save(){
console.log("保存")
}
}
2、
useri可以自己定义名字
import useri from './userApi'
useri.getList()
useri.save()
webpack
前端项目中有很多的js,css,png文件,平时如果将源码泄露出去会不安全,于是可以用webpack将多个文件打包成一个文件,提升网页响应效率。
安装命令:cnpm install -g webpack webpack-cli,这条命令下载完查看版本报错,指定版本下载,cnpm install -g webpack@5.16.0 webpack-cli@4.4.0
安装成功后用 webpack -v 查询版本
webpack -w可以监听代码,不需要保存,实时更新。
打包js实战
1.创建一个项目,使用npm init -y 初始化为nodejs项目
2.创建一个src目录
3.在目录下创建2个文件,一个until.js,一个common.js
代码分别为
//输出
exports.info = function(str){
//往控制台输出
console.log(str);
//往浏览器输出
document.write(str);
}
exports.add=(a,b)=>a+b;
4.准备一个main.js文件,集中引入文件
const util = require('./util')
const common = require('./common')
common.info("helloWorld"+util.add(100,100))
5.根目录下定义一个webpack.config.js 文件配置打包的规则
//导入path模块,nodejs系统内置的
const path = require('path')
//定义打包规则
module.exports = {
//定义要打包的入口函数的地址
entry:"./src/main.js",
//编译成功后输出的位置,名字
output:{
//_dirname是一个常量,表示当前项目的根目录
path:path.resolve(__dirname,"./dist"),
filename:"bundle.js"
}
}
6.执行webpack查看效果
如果执行报错如下:
webpack : 无法加载文件 C:\Users\LENOVO\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?Link
ID=135170 中的 about_Execution_Policies。
解决方案:
关闭vscode,以管理方式重新打开vscode,在终端执行set-ExecutionPolicy Remotesigned可解决
css打包实战
1、安装loader依赖,npm install --save -dev style-loader css-loader
2、更改上面的打包规则,增加一条
module:{
rules:[{
test:/\.css$/,
use:["style-loader","css-loader"]
}]
}
3、src目录下增加一个styel.css样式文件
body{
background:yellow;
}
4、main.js中增加引入包
require(“./style.css”)
5、重新webpack执行编译查看网页变成黄色了。