# bower與npm
> 1、創建一個名爲node文件夾
> 2、node文件夾下創建一個名爲app的js文件 app.js
> 3、node文件夾下創建一個名爲src文件夾，裏面新建一個index.html
> 4、src文件夾下通過cmd下打開的dos窗口中執行命令 npm install bower -g（安裝管理包bower：npm 是管理拉取後端的包 bower是管理拉取前端的包）
> 5、接着執行命令bower init（bower 初始化生成 bower.json）、 null>.bowerrc （創建一個空的隱藏文件.bowerrc）
> 6、.bowerrc文件下手動寫入{"directory": "./components"} 下載包的時候把前端包都放在components這個文件夾下
> 7、bower install jquery bootstrap --save 按需下載前端包 (在index.html進行引入)
> 8、node文件夾下通過cmd下打開的dos窗口中執行命令 npm init、npm install express --save（初始化npm、安裝express包）
# app.js配置## 創建服務
```
var express = require('express')//引入 express包
var path = require('path')
var bodyparser = require('body-parser')//對form表單提交的數據進行引用
var app = express()//實例化一個對象
app.use(bodyparser.json())//對json數據進行處理
//src下新建一個info.html localhost:3000/list跳轉到這個頁面(_請求的可以和頁面名稱不一致)
app.use('/list',function(req,res) {
res.status(200).sendFile(path.join(__dirname,'src','info.html'))
})
//index.html默認訪問頁面 localhost:3000 跳轉到這個頁面
app.use(express.static(path.join(__dirname,'src')))
//src下新建一個 err文件夾 並新建一個404Error.html,如果上面 都找不到就跳到404頁面
app.use('*',function(req,res) {
res.status(200).sendFile(path.join(__dirname,'src','err','404Error.html'))
})
app.listen(3000 , function(err){//啓動一個3000的服務
if(err){
console.log('監聽失敗')
throw err
}
console.log('服務器已開啓，端口號爲3000')
})
```
## 創建接口
```
app.post('/b' , function(req , res) {//post接口
// res.status(200).send('這是get回來的數據')
var stu={
name:'lilei',
age:21
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
app.get('/a' , function(req , res) {//get接口
// res.status(200).send('這是get回來的數據')
var stu={
name:'lili',
age:20
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
app.get('/d/:id' , function(req , res) {//get接口傳參
// res.status(200).send('這是get回來的數據')
var students=[
{name:'hello',age:21,id:100},
{name:'helloni',age:22,id:101},
{name:'hellowo',age:24,id:102},
]
var idx=req.params.id;
console.log(idx)
var obj={}
for(var i=0;i<students.length;i++) {
if(students[i].id == idx) {
obj=students[i];
}
}
res.status(200).json(obj)
})
app.post('/f' , function(req , res) {//post接口 from表單提交
// res.status(200).send('這是get回來的數據')
var name=req.body.name;
var age=req.body.age;
var id=req.body.id;
var obj={
name:name,
age:age,
id:id
}
console.log(name);
res.status(200).json(obj)
})
app.all('/c' , function(req , res) {//接口c,既可以get請求到也可以爲post請求
// res.status(200).send('這是get回來的數據')
var stu={
name:'liuhao',
age:22
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
```
## app.js 總的代碼
```
var express = require('express')//引入 express包
var path = require('path')
var bodyparser = require('body-parser')//對form表單提交的數據進行引用
var app = express()//實例化一個對象
app.use(bodyparser.json())//對json數據進行處理
app.use(bodyparser.urlencoded({extended:false}))//解密
app.post('/b' , function(req , res) {//post接口
// res.status(200).send('這是get回來的數據')
var stu={
name:'lilei',
age:21
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
app.get('/a' , function(req , res) {//get接口
// res.status(200).send('這是get回來的數據')
var stu={
name:'lili',
age:20
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
app.get('/d/:id' , function(req , res) {//get接口傳參
// res.status(200).send('這是get回來的數據')
var students=[
{name:'hello',age:21,id:100},
{name:'helloni',age:22,id:101},
{name:'hellowo',age:24,id:102},
]
var idx=req.params.id;
console.log(idx)
var obj={}
for(var i=0;i<students.length;i++) {
if(students[i].id == idx) {
obj=students[i];
}
}
res.status(200).json(obj)
})
app.post('/f' , function(req , res) {//post接口 from表單提交
// res.status(200).send('這是get回來的數據')
var name=req.body.name;
var age=req.body.age;
var id=req.body.id;
var obj={
name:name,
age:age,
id:id
}
console.log(name);
res.status(200).json(obj)
})
app.all('/c' , function(req , res) {//接口c,既可以get請求到也可以爲post請求
// res.status(200).send('這是get回來的數據')
var stu={
name:'liuhao',
age:22
}
res.status(200).json({
code:200,
success:true,
data:stu
})
})
//src下新建一個 list.html localhost:3000/list跳轉到這個頁面
app.use('/list',function(req,res) {
res.status(200).sendFile(path.join(__dirname,'src','info.html'))
})
//index.html默認訪問頁面 localhost:3000 跳轉到這個頁面
app.use(express.static(path.join(__dirname,'src')))
//src下新建一個 err文件夾 並新建一個404.html,如果上面 都找不到就跳到404頁面
app.use('*',function(req,res) {
res.status(200).sendFile(path.join(__dirname,'src','err','404Error.html'))
})
app.listen(3000 , function(err){//啓動一個3000的服務
if(err){
console.log('監聽失敗')
throw err
}
console.log('服務器已開啓，端口號爲3000')
})
```# index.html配置
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel='stylesheet' href='components/bootstrap/dist/css/bootstrap.min.css'>
</head>
<body>
<h1>默認首頁</h1>
<div id="msg"></div>
<div id="msg1"></div>
<div id="msg2"></div>
<div id="msg3"></div>
<button class="btn btn-primary" id="sendMessage">發送get請求</button>
<button class="btn btn-danger" id="sendPostMessage">發送Post請求</button>
<button class="btn btn-primary" id="sendGetPost">發送get/Post請求</button>
<button class="btn btn-danger" id="sendRouter">發送get請求,路由傳參</button>
<button class="btn btn-primary" id="sendBody">發送post請求,body傳參</button>
<script src="components/jquery/dist/jquery.min.js"></script>
<script>
//npm install body-parser --save
sendBody.οnclick=function(){
$.ajax({
url:'/f',
type:'post',
data:{
id:103,
name:'cshi',
age:23
},
success:function(res){
console.log(res)
$("#msg3").append("姓名:"+res.name+"，年齡："+res.age)
}
})
}
sendRouter.οnclick=function(){
$.ajax({
url:'/d/100',
type:'get',
success:function(res){
console.log(res)
$("#msg3").append("姓名:"+res.name+"，年齡："+res.age)
}
})
}
sendGetPost.οnclick=function(){
$.ajax({
url:'/c',
type:'get',
success:function(res){
// console.log(res)
$("#msg1").append("姓名:"+res.data.name+"，年齡："+res.data.age)
}
})
}
sendPostMessage.οnclick=function(){
$.ajax({
url:'/b',
type:'post',
success:function(res){
// console.log(res)
$("#msg1").append("姓名:"+res.data.name+"，年齡："+res.data.age)
}
})
}
sendMessage.οnclick=function(){
$.ajax({
url:'/a',
type:'get',
success:function(res){
// console.log(res)
$("#msg").append("姓名:"+res.data.name+"，年齡："+res.data.age)
}
})
}
</script>
</body>
</html>
```