上次简单展示了如何不使用webpack构建传统式前端工程。适合简单项目和学习研究。这次继续,简单完成一个ajax交互例子。
可能ajax这个词比较久远了,实际就是使用浏览器的XmlHttpRequest组件完成HTTP请求,这个组件是微软最先提供的,在IE独大的年代还是很具有创新性。做到了不刷新网页的情况下交互数据,进行页面的局部内容数据更新。放到现在,这已经是个很常规的基础组件了,结合MVVM框架,构建完善的用户体验良好的前端应用。
好,上正文,为了方便学习交流,我把代码放到github上了,vue-demo,位于vue-demo-no-webpack分支上。
先用express加上axios实现一个非常简单的代理,方便跨域访问任意网站。
新增一个src/api.js
文件:
const axios = require('axios')
const express = require('express')
const router = express.Router()
//跨域代理
router.post('/proxy', async (req, res) => {
try{
const response = await axios(req.body.req)
res.status(response.status).send(response.data)
}catch(err){
if(err.response){
res.status(err.response.status).send(err.response.data)
}else{
res.status(500).send({
error: err})
}
}
})
module.exports = router
简单说一下axios这个http客户端组件库,可以运行在nodejs环境和浏览器环境,提供了一致的api。非常不错,vue官方推荐使用它替换以前的$http内部实现。
修改下index.js
,把express的路由部分加载上:
const express = require('express');
const bodyParser = require('body-parser');
const api = require('./src/api')
const port = 8080;
app = express();
app.use(bodyParser.json());
app.use(express.static('public'));
app.use('/api', api)
app.listen(port, () => console.log(`Server running: http://localhost:${
port}`));
当然你可以在api.js中完成很多其他的后端服务,如果很多服务的话,可以拆分不同的目录、不同的文件来组织维护。
注意,这里工程中,后端的修改需要重启服务,前端只要刷新页面就行。
现在完成一个查询天气并显示在页面上的例子。
vue_weather.js
Vue.component('weather', {
template: `
{
{weatherinfo.city}} |{
{weatherinfo.weather}}| {
{weatherinfo.temp1}}/ {
{weatherinfo.temp2}}
`,
data() {
return {
weatherinfo: {
}
}
},
mounted () {
this.getWeather()
},
methods: {
async getWeather(){
const res = await axios.post('api/proxy', {
req:{
url: 'http://www.weather.com.cn/data/cityinfo/101010100.html',
method: 'get'
}
})
if(res.data.weatherinfo){
this.weatherinfo = res.data.weatherinfo
}
}
}
});
非常的简单,通过代理api访问天气网的一个json的api,然后把数据拼装到页面。注意这里我也使用axios组件库,这里需要引入到index.html页面中,依然可以通过CDN引入:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
另外,使用了javascript ES6标准提供的async/wait异步调用的模型,现在nodejs和chrome浏览器都支持。告别了回调嵌套(Callback Hell),也避免了直接使用Promise带来的超长链。非常给力!
最后把页面组件加入路由,把路由加入菜单。
main.js
部分:
var router = new VueRouter({
routes: [
{
path: '/home', component: {
template: 'welcome!
' } },
{
path: '/hello', component: Vue.component('hello') },
{
path: '/weather', component: Vue.component('weather') }
]
})
vue_app.js
部分
<div class="topbar">
<ul>
<li><router-link to="/home">首页router-link>li>
<li><router-link to="/hello">hellorouter-link>li>
<li><router-link to="/weather">weatherrouter-link>li>
ul>
div>
index.html
部分
<script src="js/vue_weather.js">script>
<script src="js/vue_app.js">script>
<script src="js/main.js">script>
注意,页面组件的放置顺序,需要放在组件、路由配置main.js之前。
现在刷新页面,就可以看到weather菜单,点击后,会加载北京当天的天气和气温:
北京 |多云转阴| 18℃/ 31℃
代码可以在 github上的相应分支vue-demo-no-webpack上找到。
那么如果要实现MPA(Mutil-page Application),多页面的网页应用,就是创建多套组件、路由配置和入口html。最后使用完整的页面跳转而不是vue route中使用#
分隔锚点路径(或者叫URL 的 hash)。这样就完全回到网页端最初的模式了。这种方式的应用场景比较典型是多租户多应用,可以有很好的隔离性、灵活满足个性需求。