vue前段和后端案例

### Vue前后端联调示例 #### 项目搭建与配置 为了实现Vue前端与后端的联合调试，可以按照如下方式构建一个简单的示例项目。此过程涉及到了使用`vue-cli`来初始化一个新的Vue应用程序，并对其进行适当配置以便于后续操作。 首先，在本地环境中全局安装最新版本的`@vue/cli`工具[^2]： ```bash npm install -g @vue/cli ``` 接着利用该命令行工具快速建立新的工程目录结构以及必要的文件夹和初始文件集： ```bash npx vue create my-project cd my-project ``` 对于希望自定义更多选项的情况，则可以在创建时选择手动配置特性，如Router、Vuex等支持功能。 #### 配置代理解决跨域问题 由于浏览器同源策略限制，默认情况下直接请求不同域名下的API接口会遇到CORS错误。因此建议修改项目的`vue.config.js`文件加入代理服务器设置，使得开发期间所有的Ajax请求都指向同一主机地址从而绕过这个问题: ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080', // 后端服务的实际运行位置 open: true, port: 8081, // 前端应用监听端口号 } }; ``` 这里假设后端已经在`localhost:8080`上提供RESTful API供前端消费；而前端则会在`localhost:8081`处被访问到。 #### 实现简单CRUD操作 接下来就是编写具体的业务逻辑代码了。考虑到实际应用场景中的增删改查需求，下面给出了一段模拟向远程数据库提交表单数据的例子（此处仅作示意用途）。需要注意的是真实世界里应当对接真实的HTTP RESTful Web Service而不是硬编码URL路径[^4]。 ```html <template> <div id="app"> <!-- 表单 --> <form @submit.prevent="handleSubmit"> <input type="text" v-model="formData.name"/> <button>Submit</button> </form> <!-- 显示列表 --> <ul> <li v-for="(item,index) in itemsList" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { name: 'App', data() { return { formData: {}, itemsList: [] }; }, methods: { handleSubmit(){ const url = '/api/items'; // 这里的/api会被devServer.proxy转发给后端 axios.post(url,this.formData).then((response)=>{ console.log(response); this.itemsList.push(this.formData); // 更新视图状态 this.formData={}; // 清空输入框 }); } }, mounted(){ // 页面加载完成后获取已有记录 axios.get('/api/items').then(({data})=>{ this.itemsList=data; }) } } </script> ``` 上述代码片段展示了如何借助Axios库发起异步网络请求并与远端资源交换JSON格式的数据流。同时通过MVVM架构下声明式的双向绑定机制让界面元素自动反映模型层的变化情况[^3]。 #### Docker容器化部署方案 当完成了基本的功能测试之后，还可以考虑采用Docker技术进一步简化生产环境下的运维工作流程。具体做法是先打包编译好的静态网页资产成镜像形式再发布至目标机器执行。以下是针对当前案例的一个简易Dockerfile模板： ```dockerfile FROM node:lts-alpine AS builder WORKDIR /usr/src/app COPY package*.json ./ RUN npm ci && npm cache clean --force COPY . . RUN npm run build FROM nginx:alpine EXPOSE 8088 COPY ./nginx.conf /etc/nginx/conf.d/default.conf COPY --from=builder /usr/src/app/dist /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"] ``` 配合相应的Nginx配置文件即可完成整个系统的上线准备工作。