一、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;
五、图片上传
- 将图片上传到服务器
- 将图片的路径保存到数据库
插件 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>