一、DNS服务器

如上图 , 访问的途径有两条

直接通过 IP 访问服务器;

输入域名 通过DNS服务器 将 域名转换为域名访问服务器;

A电脑如何访问到B电脑的网页 (上网)

A、B电脑在同一个局域网内 (一堆主机通过网线连接在一起) ;

B电脑必须装一个服务器的软件 (Apache、ngnix、node 等服务器软件) ;

获取B电脑的 IP ;

指定访问的目录;

服务器就是一台能联网并且装了服务器软件的电脑 , 连显示器都不需要有。
10.90.170.90:3000/html/txt.txt
IP 端口 指定的目录
如果以上IP的电脑开启了服务,就可以通过这个访问到这个txt文件

const express=require(‘express’)
const db=require(‘../db/connect.js’)
const path=require(‘path’)
var bodyParser =require(‘body-parser’)

const app=express()
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
//配置静态资源目录,就是弄一个文件夹 , 能通过域名访问
//app.use(express.static(path.join(__dirname,’../static’)))
app.use(‘/api’,express.static(path.join(__dirname,’../apidoc’)))
//参数1 没有 可以直接通过 hostname:port 来访问 ↑
//参数1 存在 通过 hostname:port/api(参数1) 来访问
//数据模型

const User=require(‘../db/model/useModle.js’);

//路由设置
const home=require(‘../db/model/home.js’);
const admin=require(‘../db/model/admin.js’);
const upload=require(‘../db/model/upload.js’);
app.use(‘./home’,home);
app.use(‘./admin’,admin);
app.use(‘./upload’,upload);

app.listen(3000,()=> const.log(‘Example app listening on port 3000!’))

二、api文档内容

形式
api文档的形式没有限制 Excel doc 图片 网页 记事本

内容功能:前端可以根据api来对接接口
注册接口
1. http://localhost:3000/reg
2. method get post
3. 参数 us ps
4. 状态码的含义
查看 ApiDoc 官方文档
会根据注释自动生成API文档
apidocjs.com 官方文档 复制代码
在DOS中安装 npm install apidoc -g
apidoc -h help指令
apidoc -i ./src -o ./apidoc
-i 输入(文件路径) -o 输出(文件路径)

三、api接口分类

• 前端 写页面的
• 后端 写服务器
• 前台 用户所使用的接口
• 后台 内部管理人员所使用的接口
• api 接口分两种

// 前台的接口 http://xxxx.com/home/login 登录
http://xxxx.com/home/reg 注册
// 后台的接口 http://xxxx.com/admin/login 登录
http://xxxx.com/admin/reg 注册

四、路由的使用

创建和后台相关的路由

home.js文件 ↓ 创建前台路由

//创建一个和前台相关的路由
const express=require(‘express’)
const router=express.Router();

router.get(‘/reg’,(req,res)=>{
res.send(‘home reg’)
})

router.get(‘/login’,(req,res)=>{
res.send(‘home login’)
})

module.exports=router;

server.js文件 中 ↓ (使用路由)

//路由配置 server.js中
const home=require(‘./router/home.js’); //前台路由的路径
const admin=require(‘./router/admin.js’) //后台路由的路径
const upload=require(‘./router/upload.js’) //上传图片的路径
app.use(‘./home’,home);
app.use(‘./admin’,admin);
app.use(‘./upload’,admin);

admin.js文件 ↓ (创建后台路由)

//创建和后台相关的路由
const express=require(‘express’)
const router=express.Router();
router.get(‘/reg’,(req,res)=>{
res.send(‘admin reg’)
})

router.get(‘/login’,(req,res)=>{
res.send(‘admin login’)
})

module.exports=router;

五、图片上传

1. 将图片上传到服务器
2. 将图片的路径保存到数据库

插件 multer 实现图片上传

前后台都可能有图片上传
创建和上传相关的路由
图片上传必须用post的方法
在目录下安装

upload.js文件 ↓ (创建后台路由)

// 创建和上传相关的路由
const express = require(‘express’);
const router = express.Router();
const fs = require(‘fs’)
const path = require(‘path’)
var multer = require(‘multer’)
var upload = multer({
dest: ‘uploads/’
})

// 图片上传必须用post方法
router.post(‘/img’, upload.single(‘test’), (req, res) => {
console.log(req.file)
// req.file 中有文件保存的临时路径
fs.readFile(req.file.path, (err, data) => {
if (err) {
return res.send(‘上传失败’)
}
let time = new Date().getTime() + parseInt(Math.random() * 999) + parseInt(Math.random() * 2222)
//制造一个几乎不重复的数字串
let extname = req.file.mimetype.split(‘/’)[1]
let name = time + ‘.’ + extname
fs.writeFile(path.join(__dirname, ‘../../static/img/’ + name), data, (err) => {
if (err) {
return res.send(‘写入失败’)
}
res.send({
err: 0,
msg: ‘上传ok’,
data: ‘/img/’ + name
})
});
});
})

module.exports = router;

** console.log(req.file) 的内容 ↓ **

通过这个可以拦截 大于5m的 不是图片的 ↑

** file.html ↓ **

<input type=”file” name=”image” id=”imagelist”>
<button onclick=”Req_ajax()”>上传</button>
<img src=”” alt=”” srcset=””>
<script>
var OL_Action_Root=”http://localhost:3000″;
function Req_ajax(){
console.log($(“#imagelist”)[0].files)
var formData=new FormData()
//获取file域里的图片信息
formData.append(“test”,$(“#imagelist”).files[0])
//将文件信息 append 进入formdata对象 key值 为后台 single设置的值
$.ajax({
url: OL_Action_Root+’/upload/img’,
data:formData,
cache:false,
contentType:false,
processData:false,
success:function(data){
console.log(data)
if(data.err==0){
$(‘img’).attr(‘src’,OL_Action_Root+data.data)
}
}
})
}
</script>

使用文件时 , 需要注意文件的路径 . 主要看思路 , 谢谢