不使用Webpack的Vue传统前端使用方式（二）

最新推荐文章于 2023-10-02 14:15:04 发布

原创最新推荐文章于 2023-10-02 14:15:04 发布 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #nodejs

Vue 专栏收录该内容

2 篇文章

订阅专栏

上次简单展示了如何不使用webpack构建传统式前端工程。适合简单项目和学习研究。这次继续，简单完成一个ajax交互例子。

可能ajax这个词比较久远了，实际就是使用浏览器的XmlHttpRequest组件完成HTTP请求，这个组件是微软最先提供的，在IE独大的年代还是很具有创新性。做到了不刷新网页的情况下交互数据，进行页面的局部内容数据更新。放到现在，这已经是个很常规的基础组件了，结合MVVM框架，构建完善的用户体验良好的前端应用。

好，上正文，为了方便学习交流，我把代码放到github上了，vue-demo，位于vue-demo-no-webpack分支上。

后端API

先用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页面组件

现在完成一个查询天气并显示在页面上的例子。

vue_weather.js

Vue.component('weather', {
    template: `
    <div class="container">
        <h2 v-if="weatherinfo.city">{{weatherinfo.city}} |{{weatherinfo.weather}}| {{weatherinfo.temp1}}/ {{weatherinfo.temp2}} </h2>
    </div>
    `,
    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: '<div class="container"><h1>welcome!</h1></div>' } },
      { 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">hello</router-link></li>
    <li><router-link to="/weather">weather</router-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）。这样就完全回到网页端最初的模式了。这种方式的应用场景比较典型是多租户多应用，可以有很好的隔离性、灵活满足个性需求。