新版 vue-cli 如何使用 express 来 mork

目录 Vue, 项目配置

前提是已经安装好了 node 环境,并且初始化好了项目。

一、提供 json 数据文件。
在项目根目录下,新建一个 JSON 文件 db.json。

二、配置webpack.dev.conf.js

// 新版配置
var express = require(‘express’)
var apiServer = express()
var bodyParser = require(‘body-parser’)
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require(‘fs’)
apiRouter.route(‘/:apiName’)
.all(function (req, res) {
fs.readFile(‘./db.json’, ‘utf8’, function (err, data) {
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send(‘no such api name’)
}
})
})
apiServer.use(‘/api‘, apiRouter);
apiServer.listen(3000, function (err) {
if (err) {
console.log(err)
return
}
console.log(‘Listening at http://localhost:’ +3000 +’\n’)
})
此处端口可以指定,也可以用变量 port + 1   (默认port为8080) 另外反向代理配置需要相同
三、配置反向代理
需要注意的是:webpack.dev.conf.js 中  apiServer.use(‘/api‘, apiRouter);  已经使用了 /api ,而反向代理中也使用了/api
所以 目前访问路径为:localhost:8080/api/api/xxx
(此处重写了反向代理新路径,如果pathRewrite 中路径为 / 的话 —–> localhost:8080/api/xxx)
修改反向代理 配置 /api —-> /
此时访问路径 为 localhost:8080/api/xxx
至此可以完全使用,可参见:新版 vue-cli 如何使用 json-server 来 mork
思考:webpack.dev.conf.js 中 把 /api —-> / ,而不修改 反向代理中的 /api 是否可行呢? 可以试一试哦~
此时访问路径为:http://localhost:8080/getNewsList

新版 vue-cli 如何使用 json-server 来 mork

目录 Vue, 项目配置

新版 vue-cli 如何使用 json-server 来 mork

JSON-Server 主要的作用是搭建一台 JSON 服务器,测试一些业务逻辑。

一、安装

npm install --save json-server

前提是已经安装好了 node 环境,并且初始化好了项目。

二、提供 json 数据文件。
在项目根目录下,新建一个 JSON 文件 db.json。
三、配置 json-server
在 build\webpack.dev.conf.js 下配置,如果是用旧版本的手脚架工具初始化的项目,是在 build/dev-server.js 下配置。

/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
  console.log('JSON Server is running')
})

四、访问数据
配置完成后,要 npm dev run 重启项目,然后再地址栏输入 http://localhost:3000 就可以看到访问成功页面。

 

json-server

地址栏输入 http://localhost:3000/db 就能看到之前 db.json 内容

五、设置代理
最后做一下浏览器代理设置,在 config/index.js 中:

/*代理配置表,在这里可以配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/
proxyTable: {
  '/api': {
    changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
    target: 'http://localhost:3000',// 接口的域名
    pathRewrite: {
      '^/api'''//后面可以使重写的新路径,一般不做更改
    }
  }

如图所示:


六、最后验证一下代理是否成功
在浏览器输入地址:http://localhost:8080/api。(此时等于打开 http://localhost:3000)

代理设置验证成功

成功!

七、使用

使用 vue-resouce 发送 Ajax 获取数据。

1
2
3
4
5
6
this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList
  .then((res) => {
    this.newsList = res.data
  }, (err) => {
    console.log(err)
  })

 

缺陷:只能使用get请求

 

返回首页

Vue项目中引入sass出现问题及解决办法

目录 前端

Vue项目中引入 sass 出现问题及解决办法

1,使用save会在package.json中自动添加。

npm install node-sass --save

npm install sass-loader --save

2,通常使用npm安装会出现安装失败。(网络问题)

3,可以通过淘宝的npm镜像安装node-sass,解决以上问题。

npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)

cnpm install node-sass --save (使用淘宝镜像安装node-sass)


npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

npm install node-sass --save

4.安装node-sass后编译不通过

npm i node-sass -D

 

返回首页

Nginx下wordpress固定链接更改后文章404问题解决

目录 wordpress

解决Nginx 下wordpress文章固定链接后 404 问题

安装好wordpress后默认文章固定链接后缀是 ?p=xx之类的,在进行SEO优化的时候,遇到了问题。

在固定链接设置中,我根据SEO优化选择了自定义结构,不过在打开文章页面的时候 遭遇404.

 

在Google后,搜索关键字 Nginx+wordpress+404. 看了相关博客后,表示问题都没解决。教程有点更新不上。

最后我找到了这篇文章,问题得到解决。

方法:

打开:/usr/local/nginx/conf/nginx.conf 文件     在文件中  server{  }  加入 :

location / {
      try_files $uri $uri/ /index.php?$args;
    }


同目录文件:wordpress.conf 文件中 rewrite 规则 就是上文添加规则。

回到文章首页