# 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>
```