简述DNS服务器、API、路由 , 以实现图片的上传和显示

一、DNS服务器

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

1. 直接通过 IP 访问服务器;
2. 输入域名 通过DNS服务器 将 域名转换为域名访问服务器;

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

1. A、B电脑在同一个局域网内 (一堆主机通过网线连接在一起) ;
2. B电脑必须装一个服务器的软件 (Apache、ngnix、node 等服务器软件) ;
3. 获取B电脑的 IP ;
4. 指定访问的目录;

服务器就是一台能联网并且装了服务器软件的电脑 , 连显示器都不需要有。
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>

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