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

悠悠 2022-04-12 05:15 205阅读 0赞

### 一、DNS服务器 ###

![DNS服务器][DNS]  
**如上图 , 访问的途径有两条**

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

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

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

![如何访问其他电脑的内容][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]

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

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

// 前台的接口 [http://xxxx.com/home/login][http_xxxx.com_home_login] 登录  
[http://xxxx.com/home/reg][http_xxxx.com_home_reg] 注册  
// 后台的接口 [http://xxxx.com/admin/login][http_xxxx.com_admin_login] 登录  
[http://xxxx.com/admin/reg][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的方法  
在目录下安装  
\*\*官方文档文件 ↓ \*\*  
![在这里插入图片描述][20181202164130978.png]

**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) 的内容 ↓ \*\*  
![在这里插入图片描述][20181201151724997.png]  
通过这个可以拦截 大于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>

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

[DNS]: /images/20220412/772d570015914248bfdcaa662ed27e1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: /images/20220412/f627385448dc41a7906db7530cc6f24d.png
[http_localhost_3000_reg]: http://localhost:3000/reg
[apidocjs.com]: http://apidocjs.com
[api]: /images/20220412/5a407033c16d4cbaaffcfcacf59ab787.png
[http_xxxx.com_home_login]: http://xxxx.com/home/login
[http_xxxx.com_home_reg]: http://xxxx.com/home/reg
[http_xxxx.com_admin_login]: http://xxxx.com/admin/login
[http_xxxx.com_admin_reg]: http://xxxx.com/admin/reg
[20181202164130978.png]: /images/20220412/4bbd572fa2e440e7924a10a2de1847b2.png
[20181201151724997.png]: /images/20220412/e28962af700c4252ae106472cc2c9ea6.png