Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
A, DNS server
As shown above, there are two ways to access
- Direct access to the server via IP;
- Enter the domain name through the DNS server will convert the domain name as a domain name access servers;
A computer how to access the web page B computer (Internet)
- A, B in a computer local area network within the same (host connected together by a bunch of lines);
- B Computer software must be installed in a server (Apache, ngnix, node server software, etc.);
- B acquires the IP of the computer;
- Specified directory access;
Server is a network-enabled computer and server software installed, you do not even need a monitor.
10.90.170.90:3000/html/txt.txt
IP port specified directory
if the computer is turned over IP service, you can use this to access this txt file
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!'))
Two, api document content
- Form
form api documentation is no limit to Excel doc picture page notepad - Content
features: front-end can be docking interface according to api
registration interface
1. HTTP: // localhost: 3000 / REG
2. GET POST Method,
3. parameter us ps
meaning 4. Status Code
View ApiDoc official document
will be automatically generated API documentation from comments
apidocjs.com official documents duplicated code
installed npm install apidoc -g in DOS
apidoc -h help instruction
apidoc the ./src -o ./apidoc -i
-i input (file path) -o output (file path)
Three, api Interface Category
- The front page of writing
- Write back-end server
- Front user interface used
- Backstage internal management interface used
- api two types of interfaces
// reception interface http://xxxx.com/home/login Login
http://xxxx.com/home/reg registered
// backend interface http://xxxx.com/admin/login login
http: // xxxx.com/admin/reg registration
Fourth, the use of the route
Create routes and related background
home.js file ↓ create routing reception
//创建一个和前台相关的路由
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 file ↓ (use routing)
//路由配置 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 file ↓ (to create background routing)
//创建和后台相关的路由
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;
Fifth, image upload
- Upload pictures to the server
- Pictures will be saved to the database path
Plug multer achieve picture upload
Taiwan has pictures may be uploaded
to create and upload the associated routing
upload pictures must post method of
installation in the directory
** Official Documents ↓ **
upload.js file ↓ (to create background routing)
// 创建和上传相关的路由
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) content ↓ **
by this intercept is not greater than 5m pictures ↑
** 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>