js修改地址栏url_node.js---打通js前后端初体验（1）-CSDN博客

js的应用为什么会越来越广泛呢！

node.js 使得javascript可以做后端开发成为了一种可能，这样可以使一些前端开发工程师成为全栈工程师成为了可能，并在各个行业强占后端市场。

1.1 网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。

客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。

服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

1.2 Node 网站服务器

能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。

1.3 IP地址

互联网中设备的唯一标识。

IP是 Internet Protocol Address 的简写，代表互联网协议地址

这个相信大家都很熟悉，我就不贴图了

1.4 域名

由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址。

虽然在地址栏中输入的是网址, 但是最终还是会将域名转换为ip 才能访问到指定的网站服务器

1.5 端口

使用端口区分不同的服务，它是一些具有一定范围的数字, 范围是0到65535, 每一个向外界提供服务的软件, 都要占用一个端口

1.6 URL

统一资源定位符，又叫URL（Uniform Resource Locator），是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的是URL。

URL的组成

传输协议://服务器IP或域名:端口/资源所在位置标识

http：超文本传输协议，提供了一种发布和接收HTML页面的方法。

今天主要分享的是服务端相关的知识。文末会有一个串联前后端的案例！

创建web服务器

  // 引用系统模块
 const http = require('http');

  // 创建web服务器
 const app = http.createServer();

  // 当客户端发送请求的时候
 app.on('request', (req, res) => {

        //  响应
       res.end('<h1>hi, user</h1>');
 });

  // 监听3000端口
 app.listen(3000);
 console.log('服务器已启动，监听3000端口，请访问 localhost:3000')

有了后端服务器，我们还要将前后端用某种方式联系起来！这种方式就是HTTP协议。

HTTP 协议

3.1 HTTP协议的概念

超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。

3.2 报文

在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。

报文分为两种，页面发送的请求报文和服务器接收后反馈的响应报文！

请求报文根据请求方式分为两种：

1，get请求数据。

参数被放置在浏览器地址栏中，例如：http://localhost:3000/?name=chencong&age=20

参数获取需要借助系统模块url，url模块用来处理url地址

 const http = require('http');
 // 导入url系统模块 用于处理url地址
 const url = require('url');
 const app = http.createServer();
 app.on('request', (req, res) => {
     // 将url路径的各个部分解析出来并返回对象
         // true 代表将参数解析为对象格式
     let {query} = url.parse(req.url, true);
     console.log(query);
 });
 app.listen(3000);

2，post发送数据

参数被放置在请求体中进行传输

获取POST参数需要使用data事件和end事件

使用querystring系统模块将参数转换为对象格式

 // 导入系统模块querystring 用于将HTTP参数转换为对象格式
 const querystring = require('querystring');
 app.on('request', (req, res) => {
     let postData = '';
     // 监听参数传输事件
     req.on('data', (chunk) => postData += chunk;);
     // 监听参数传输完毕事件
     req.on('end', () => { 
         console.log(querystring.parse(postData)); 
     }); 
 });

同时还需要有请求地址（Request URL）

app.on('request', (req, res) => {
     req.headers  // 获取请求报文
     req.url      // 获取请求地址
     req.method   // 获取请求方法
 });

响应报文

http状态码可粗略分为：

200 请求成功

404 请求的资源没有被找到

500 服务器端错误

400 客户端请求有语法错误

内容类型可以分为以下：

text/html

text/css

application/javascript

image/jpeg

application/json

 app.on('request', (req, res) => {
     // 设置响应报文
     res.writeHead(200, {'Content-Type': 'text/html;charset=utf8‘
     });
 });

这种响应当然是需要一个中枢来操纵的，这个我们称为路由！

路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说，就是请求什么响应什么

 // 当客户端发来请求的时候
 app.on('request', (req, res) => {
     // 获取客户端的请求路径
     let { pathname } = url.parse(req.url);
     if (pathname == '/' || pathname == '/index') {
         res.end('欢迎来到首页');
     } else if (pathname == '/list') {
         res.end('欢迎来到列表页页');
     } else {
        res.end('抱歉, 您访问的页面出游了');
     }
 });

中枢有了，那么接下来我们再了解一下数据库！

为什么要使用数据库？

动态网站中的数据都是存储在数据库中的
数据库可以用来持久存储客户端通过表单收集的用户信息
数据库软件本身可以对数据进行高效的管理

数据库即存储数据的仓库，可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件，可以通过API去操作它。

常见的数据库软件有：mysql、mongoDB、oracle。

Node.js通常使用MongoDB作为其数据库，具有高性能，易使用，存储数据方便等特点，完全使用JavaScript语法即可操作。

MongoDB概念

数据库操作

开启mongoDB服务

在命令行工具中运行net start mongodb即可开启MongoDB服务。

创建数据库

在MongoDB中不需要显式创建数据库，如果正在使用的数据库不存在，MongoDB会自动创建。

数据库连接

// 引用mongoose包
const mongoose = require('mongoose');
// 数据库链接
mongoose.connect('mongodb://localhost/playground')
	.then(() => console.log('数据库连接成功'))
	.catch(err => console.log('数据库连接失败', err));

创建集合

创建集合实际上就是对集合设定规则。

// 设置集合规则
const courseSchema = new mongoose.Schema({
    name: String,
    author: String,
    tags: [ String ],
    data: { type: Date, default: Date.now },
    isPublished: Boolean
});
// 使用规则创建集合 返回集合类(集合构造函数)
const Course = mongoose.model('Course', courseSchema);

创建文档

创建文档实际上就是向集合中插入具体的数据。

// 创建集合类的实例
const course = new Course({
    name: 'Node.js course',
    author: 'wangjian',
    tags: ['node', 'backend'],
    isPublished: true
});
// 保存实例
course.save();

插入数据的另一种形式

Course.create({name: 'JavaScript基础', author: '黑马讲师', isPublish: true}, (err, doc) => { 
     //  错误对象
    console.log(err)
     //  当前插入的文档
    console.log(doc)
});
// create还支持promise 可以写成下面的形式
Course.create({name: 'JavaScript基础', author: '黑马讲师', isPublish: true})
      .then(doc => console.log(doc))
      .catch(err => console.log(err))

查询文档

Course.find({
    name: 'wangjian',
    isPublished: true
})
.limit(10),
.sort({name: 1}) // 1 升序 -1 降序
.select({name: 1, tags: 1})
.exec((err, data) => {})

删除文档

 // 删除单个
Course.findOneAndDelete({}).then(result => console.log(result))
// findOneAndDelete只会删除一个如果有多条数据 就删除第一个

 // 删除多个
User.deleteMany({}).then(result => console.log(result))


Course.findByIdAndRemove(id, err => {});

更新文档

// 更新单个
User.updateOne({查询条件}, {要修改的值}).then(result => console.log(result))

// 更新多个
User.updateMany({查询条件}, {要更改的值}).then(result => console.log(result))

// 根据id更新
Course.findByIdAndUpdate(id, {
    $set: {
        author: 'mosh',
        isPublished: false
    }
}, err => {})

最后是我们的案例环节！

搭建网站服务器，实现客户端与服务器端的通信
连接数据库，创建用户集合，向集合中插入文档
当用户访问/list时，将所有用户信息查询出来
1. 实现路由功能
2. 呈现用户列表页面
3. 从数据库中查询用户信息将用户信息展示在列表中

首先创建服务器连接数据库响应用户页面

// 1. 创建 Web 服务器
// 2. 连接数据库
// 3. http://localhost:3000/list 响应用户列表页面
const http = require('http');
const app = http.createServer();
app.on('request', async (req, res) => {
      }）
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

然后连接数据库的代码，创建集合规则，// 根据集合规则创建集合

// 1. 创建 Web 服务器
// 2. 连接数据库
// 3. http://localhost:3000/list 响应用户列表页面
const http = require('http');
const app = http.createServer();
const url = require('url');

// 连接数据库的代码
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/info', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => console.log('连接成功')).catch(err => console.log(err, '连接失败'));
// 创建集合规则
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); // users

最后查询数据库中的所有内容，显示用户列表的内容！

// 1. 创建 Web 服务器
// 2. 连接数据库
// 3. http://localhost:3000/list 响应用户列表页面
const http = require('http');
const app = http.createServer();
const url = require('url');

// 连接数据库的代码
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/info', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => console.log('连接成功')).catch(err => console.log(err, '连接失败'));
// 创建集合规则
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); // users

app.on('request', async (req, res) => {
    const method = req.method;
    const {pathname, query} = url.parse(req.url, true);
    if(method === "GET") {
        if(pathname === '/list') {
            // 查询数据库中的所有内容
            const users = await User.find();
            // 显示用户列表的内容
            let str = `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>用户列表</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
            </head>
            <body>
                <div class="container">
                    <h6>
                        <a href="add.html" class="btn btn-primary">添加用户</a>
                    </h6>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td>用户名</td>
                            <td>年龄</td>
                            <td>爱好</td>
                            <td>邮箱</td>
                            <td>操作</td>
                        </tr>`;
                        users.forEach(item => {
                            str += `
                            <tr>
                            <td>${item.name}</td>
                            <td>${item.age}</td>
                            <td>
                                <span>抽烟</span>
                                <span>喝酒</span>
                                <span>烫头</span>
                            `;
                            
                            item.hobbies.forEach(item2 => {
                                str += `<span>${item2}</span>&nbsp;`;
                            });
                            str +=`
                            </td>
                            <td>${item.email}</td>
                            <td>
                                <a href="" class="btn btn-danger btn-xs">删除</a>
                                <a href="" class="btn btn-success btn-xs">修改</a>
                            </td>
                        </tr>
                            `;
                        });

                str += `
                    </table>
                </div>
            </body>
            </html>
            `;
            res.end(str);
        }
    } else if(method === "POST") {

    }
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));