当前位置： 首页 > article >正文

Vue.js 与后端配合：打造强大的现代 Web 应用

article 2024/11/15 10:42:05

一、Vue.js 与后端配合的魅力

Vue.js 作为一款流行的前端框架，具有诸多优势。它是一个轻量级和灵活的框架，核心库专注于视图层，压缩后只有几十 KB，非常容易与其他库或现有项目集成。Vue.js 还是一个渐进式框架，可以自底向上逐层应用，开发者可以根据项目需求选择使用其核心库，或者结合 Vue Router、Vuex 等官方库构建复杂的单页面应用。

组件化是 Vue.js 的一大亮点。它提供了强大的组件系统，开发者可以构建可复用的代码块，极大地提高了开发效率。同时，Vue.js 的响应式数据绑定使得当数据发生变化时，视图会自动更新，这种声明式的数据绑定方式让开发者能够更加专注于业务逻辑，而不必手动更新 DOM。此外，Vue.js 使用虚拟 DOM 来提高性能，当数据变化时，它会创建一个新的虚拟 DOM 树，并与旧的树进行比较，找出差异后只更新需要变化的 DOM 节点。

Vue.js 与后端配合具有重要意义。在现代 Web 应用开发中，前后端分离已成为主流趋势。Vue.js 作为前端框架，可以专注于用户界面的设计和交互，而后端则负责处理数据存储和业务逻辑。通过与后端配合，Vue.js 能够实现高效的数据交互，为用户提供流畅的体验。

Vue.js 与后端配合的应用场景非常广泛。无论是大型企业级应用，还是小型项目，都能看到 Vue.js 与后端配合的身影。例如，在电商平台中，Vue.js 可以构建美观的用户界面，与后端配合实现商品展示、购物车管理、订单处理等功能。在社交网络应用中，Vue.js 可以打造互动性强的界面，与后端配合实现用户注册登录、动态发布、评论点赞等功能。

总之，Vue.js 以其独特的优势和与后端的良好配合，在 Web 开发领域中占据着重要地位。

二、Vue.js 与 Flask 后端配合

（一）项目示例与技术分析

Ailln 的 Vue-Flask 模板是一个很好的 Vue.js 与 Flask 完美结合的项目示例。在这个模板中，前端的 Vue.js 展现出了极大的灵活性。Vue.js 负责处理页面的动态数据，通过其强大的组件化系统，开发者可以构建可复用的代码块，极大地提高开发效率。同时，Vue.js 的响应式数据绑定使得数据变化时视图自动更新，让开发者专注于业务逻辑而无需手动更新 DOM。此外，Vue.js 的路由管理功能使代码结构清晰，易于维护。

后端的 Flask 则体现出轻量级的优势。Flask 是一个基于 Python 的微型 Web 框架，它提供了 RESTful API 接口，处理来自前端的数据交互和数据库操作。Flask 的插件生态丰富，可以根据项目需求轻松扩展。例如，在模板中，SQLite 数据库被集成进来，SQLite 是内置于 Python 的标准数据库引擎，简单易用，适合小型项目或测试环境，无需额外设置，方便开发者快速搭建数据存储层。Axios 作为请求库，在 Vue.js 应用中发起 HTTP 请求到 Flask 后端，处理数据交互。Axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。

（二）应用场景与特点

Vue.js 与 Flask 的配合适用于多种单页应用项目，如个人博客系统、小规模的管理后台等。对于初学者来说，它也是一个理想的入门教程，展示了前后端分离开发的完整流程。

这种配合具有快速部署的特点，预配置的前端和后端环境让开发者能够迅速启动新项目。模块化也是其一大优势，Vue.js 组件化的思想贯穿整个项目，便于代码重用和维护。遵循 RESTful 原则的 API 设计使后端接口清晰可读，易于定制则意味着对 Vue.js 和 Flask 有一定了解的开发者可以根据需求自由扩展功能。此外，开源社区的支持，丰富的文档和教程，为开发者提供了丰富的学习资源，利于学习和交流。

三、Vue.js 与 Django 后端配合

（一）构建流程与技术栈

构建 Vue.js 与 Django 后端配合的项目通常需要以下步骤：

  1. 创建 Django 项目：使用命令 django-admin startproject project_name 创建一个新的 Django 项目。Django 是一个强大的 Python Web 框架，以其 “Batteries Included” 的理念著称，提供了模型 - 视图 - 模板（MVT）架构、内置的 ORM（对象关系映射）、强大的认证系统等功能。
  2. 配置后端：在 Django 项目的 settings.py 文件中配置数据库连接等后端设置。例如，可以配置使用 MySQL 数据库，通过设置 DATABASES 字典来指定数据库引擎、名称、用户、密码和主机等信息。
  3. 创建应用：使用 python manage.py startapp app_name 命令在 Django 项目中创建一个应用。应用是 Django 项目的组成部分，用于组织特定功能的代码。
  4. 配置路由：在 Django 项目的主路由文件和应用的路由文件中配置 URL 路由，将不同的 URL 请求映射到相应的视图函数或类。这确保了前端的请求能够正确地被后端处理并返回相应的响应。
  5. 安装 Django REST framework：pip install djangorestframework。Django REST framework 是 Django 的一个强大扩展，用于快速开发高质量的 RESTful Web 服务。它提供了序列化、分页、认证、权限控制等功能，方便与 Vue.js 前端进行数据交互。

技术栈中除了 Django 和 Vue.js 外，还可能涉及 Node.js 用于管理 Vue.js 项目的依赖和构建工具。数据库方面，可以选择 MySQL、PostgreSQL 等关系型数据库，或者 MongoDB 等非关系型数据库。相关工具还包括前端构建工具如 Webpack、Babel 等，以及后端的虚拟环境管理工具如 virtualenv 等。

（二）解决跨域问题与优势

在 Vue.js 与 Django 后端配合的过程中，跨域问题是常见的挑战之一。由于浏览器的同源策略，当 Vue.js 前端应用和 Django 后端部署在不同的域名或端口下时，会出现跨域请求被阻止的情况。

解决方案主要有以下几种：

  1. 中间件方式：在 Django 项目中创建一个中间件，在中间件的 process_response 方法中设置响应头，允许跨域请求。例如，可以设置 Access-Control-Allow-Origin 为 * 表示允许任何源的请求，或者设置为特定的域名。代码示例如下：

from django.utils.deprecation import MiddlewareMixin

class corsMiddleware(MiddlewareMixin):

    def process_response(self, request, response):

        response['Access-Control-Allow-Origin'] = '*'

        response['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'

        response['Access-Control-Allow-Headers'] = '*'

        response['Access-Control-Allow-Credentials'] = True

        return response

然后在 Django 项目的 settings.py 文件中的 MIDDLEWARE 列表中添加这个中间件。

2. 在视图函数中设置响应头：在 Django 的视图函数中，可以手动设置响应头来允许跨域请求。例如：

def view_function(request):

    response = HttpResponse()

    response['Access-Control-Allow-Origin'] = '*'

    return response

前后端分离带来的优势众多：

  1. 分工明确：前端和后端开发人员可以独立工作，互不干扰，提高开发效率。
  2. 技术选型灵活：前端可以选择 Vue.js 这样的现代前端框架，后端可以根据项目需求选择 Django 或其他适合的框架，不受技术限制。
  3. 可维护性强：代码结构清晰，前后端职责分明，便于维护和扩展。
  4. 适合复杂应用场景：对于大型企业级应用、电商平台、社交网络等复杂项目，前后端分离能够更好地满足需求。

Vue.js 与 Django 的配合适用于各种应用场景，如企业管理系统、在线教育平台、新闻媒体网站等。在这些场景中，Vue.js 可以构建美观、交互性强的用户界面，Django 后端则可以提供稳定、高效的数据存储和业务逻辑处理。

四、Vue.js 结合后端开发公众号

（一）微信公众号后台管理系统

项目简介：

VueWechatPlateform 是一个开源的、基于 Vue.js 开发的微信公众号管理平台。它旨在为开发者提供快速搭建微信公众号后台系统的基础，让开发者专注于业务逻辑和功能实现，避免重复编写基础架构代码。

技术栈分析：

  • Vue.js：作为核心框架，提供组件化、声明式的数据绑定和虚拟 DOM 等特性，使项目易于维护且性能优秀。
  • Vuex：用于集中管理应用的状态，保证数据的一致性和可预测性。
  • Element UI：高质量的 UI 组件库，提升开发效率，提供丰富的预设样式。
  • axios：流行的 HTTP 客户端库，处理 API 请求。
  • Webpack：模块打包器，负责编译和优化源码。
  • Echarts：数据可视化库，可定制各种复杂图表，用于搭建数据报表。

应用场景：

  • 微信公众号管理：方便进行文章发布、用户管理、消息推送等功能开发。
  • 数据分析：通过集成 Echarts，可搭建用户增长趋势图、阅读量统计等各类数据报表。
  • 个性化后台系统：根据需求轻松扩展，满足特定业务场景，如添加新的 API 接口或自定义组件。

特点与优势：

  • 快速开发：基于成熟的 Vue.js 生态，大大减少开发周期，聚焦业务创新。
  • 高度可扩展：模块化设计使增加新功能简单，支持与其他第三方服务整合。
  • 良好文档：完善的文档指导，初学者也能快速上手。
  • 社区支持：作为开源项目，受社区持续关注和贡献，问题修复和新特性更新频繁。
  • 响应式布局：采用移动优先设计理念，适配不同设备，提供良好的用户体验。
  • 安全实践：遵循最佳安全实践，包括数据加密、防止 XSS 和 CSRF 攻击等。

结语：

VueWechatPlateform 是一个强大且易用的工具，对于需要构建微信公众号后台系统的开发者来说，它提供了一个绝佳的起点。无论个人开发者还是团队，都能从中受益。鼓励大家尝试并参与这个项目的改进，共同打造更好的微信公众号解决方案。

（二）JS-SDK 授权与 API 使用

在微信公众号开发中，JS-SDK 授权是实现更多功能的重要步骤。以下是 JS-SDK 授权的步骤和 API 的使用方式。

JS-SDK 授权步骤：

  1. 阅读官方 JSSDK 的使用步骤。
    • 步骤一：所谓的绑定域名就是在测试号中绑定内网映射工具赠送的域名。
    • 步骤二：引入 js 文件，可以在 html 文件中使用 <script> 标签引入，也支持使用 npm。如在 Vue 脚手架中使用 npm 安装 weixin-js-sdk，然后在组件中引入 var wx = require('weixin-js-sdk') 或在 main.js 中引入并全局注册在 Vue 原型链上。
    • 步骤三：配置数据从后端获取。需要把获取签名列表的任务交给后端，因为前端弄会出现跨域问题且每次调用都会进行多次请求与计算，严重影响性能。后端根据附录 1 中的 js-sdk 权限签名算法，做出一个接口，前端只需传入当前网址的前缀部分，即可获得 appId、timestamp、nonceStr、signature 这四个内容。
    • 步骤四：通过 wx.config 注入权限验证配置，包括调试模式、公众号唯一标识、生成签名的时间戳、随机串、签名以及需要使用的 JS 接口列表。
    • 步骤五：通过 wx.ready 处理成功验证，当准备就绪后，可以调用 JS-SDK 的接口。

API 的使用方式：

以扫描二维码功能为例，在 wx.ready 函数中调用 wx.scanQRCode。设置 needResult 参数默认为 0，由微信处理扫描结果，设为 1 则直接返回扫描结果。scanType 参数可以指定扫二维码还是一维码，默认二者都有。在 success 回调函数中获取扫描结果，进行逻辑处理。如：

wx.ready(function () {

  //开启扫描功能

  wx.scanQRCode({

    needResult: 1,

    scanType: ["qrCode"],

    success: function (resson) {

      var result = resson.resultStr;

      // 拿到结果后做逻辑处理即可

    },

  });

  wx.error(function (res2) {

    console.log("扫码错误信息", res2);

  });

});

在解决跨域问题方面，可以使用以下方法：

  1. 本地测试时，可以使用 natapp 用临时域名映射到本地，同时配置 web 服务器，如使用 Tomcat，在其目录下新建文件夹并放置微信提供的文件，在微信开发者工具中配置域名。
  2. 在 Vue 打包前，在 vue.config.js 中配置公共路径，根据环境不同指向不同路径。执行 npm run build 将打包好的文件放入 Tomcat 的相应文件夹下。
  3. 由于微信限制，微信授权页面必须在微信开发工具中打开，本地服务和微信接口的 api 存在跨域问题。本地调试时可以调用命令 open -a /Applications/wechatwebdevtools.app --args --disable-web-security --user-data-dir --allow-running-insecure-content 打开微信开发工具，或者使用 Nginx 解决跨域问题。在微信开发工具中输入：http://xxx.xxx.cc/myapp。

总之，Vue.js 结合后端开发微信公众号，可以充分利用 Vue.js 的优势和后端的强大功能，实现丰富的微信公众号功能开发。

五、Vue.js 配合后端用于知乎

（一）Laravel+VueJs 开发知乎

Laravel-Zhihu 是一个基于 Laravel5.3 开发的项目，后台采用 AdminLTE-For-Laravel。这个项目拥有丰富的功能，涵盖用户登录注册（邮件认证）、用户设置、头像上传至七牛云存储、修改密码、忘记密码（邮件认证）、用户相互关注（邮件提醒）、用户发送私信（消息通知）、显示私信（已读和未读）、标志私信、标志私信全部已读、回复私信、个人主页（各项数据）、问题（问题列表、收藏问题、分享问题到第三方、问题答案评论、问题评论、答案点赞、发布问题、修改问题、删除问题）、后台（系统用户、系统用户资料修改和删除、管理员资料修改、创建问题、编辑问题、删除问题、问题评论、删除问题评论、文章标签、删除文章标签）等。

安装步骤如下：

  1. 克隆源码到本地：git clone https://github.com/GeekGhc/zh...。
  2. 进入项目目录：cd zhihu-app。
  3. 拷贝 .env 文件，将一些 secret key 改成自己服务的 key 即可：cp.env.example.env。
  4. 下载相关的依赖包（也可以使用 yarn），下载 laravel 相关依赖的包：composer install。
  5. 创建数据：php artisan zhihu:install。
  6. 创建管理员：php artisan create:admin，填写完指令要求信息后，管理员创建成功。

效果预览分为前台部分和后台部分，前台部分为 1.0 版本，前后台为 2.1 版本。

（二）前后端分离 API token 认证

在 Laravel Vue 前后端分离开发中，使用 token 认证可以解决 axios 请求报 401 unauthorized 异常的问题。原理是 Laravel Passport，它是一个 OAuth2 服务器和 API 认证包。

步骤如下：

  1. 执行命令 php artisan make:migration add_api_token_to_users_table --table=users，编辑生成的 ****_add_api_token_to_users_table.php 文件，在 users 表中添加 api_token 字段。
  2. 执行命令 php artisan migrate。
  3. 修改 API 路由，将处理刷新取关注状态和执行关注 / 取关操作的逻辑分割开：
    • 加载页面时取关注状态：Route::middleware('auth:api')->post('/questions/follow/stats', 'QuestionController@getFollowStats');。
    • 执行关注 / 取关操作：Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');。
  4. 在 QuestionController 中添加 getFollowStats 方法获取关注状态：

public function getFollowStats(Request $request)

{

    $user = auth()->guard('api')->user();

    $question = Question::find($request->get('question'));

    $followable = $user->can('follow', $question);

    return response()->json([

        'followable' => $followable,

    ]);

}

  1. 在 QuestionController 的 followThroughApi 方法中同步记录用户的关注操作和更新问题的关注计数，并返回关注状态：

public function followThroughApi(Request $request)

{

    $user = auth()->guard('api')->user();

    $question = Question::find($request->get('question'));

    // 同步记录

    $user->followQuestions()->toggle($question->id);

    $question->followers_count = $question->followUsers()->count();

    $question->update();

    // 判断用户关注状态

    $followable = $user->can('follow', $question);

    return response()->json([

        'followable' => $followable,

    ]);

}

  1. 优化用户数据的获取方式，在 QuestionController 中 followThroughApi 和 getFollowStats 方法内，直接通过 auth()->user() 或 auth()->guard('api')->user() 获取用户。

（三）实现编辑问题

在 Laravel Vuejs 实战中，实现编辑问题的功能需要以下步骤：

  1. 在 question 的 show blade 文件中提供编辑问题的入口，使用 Policy 判断用户是否有权编辑，没有权限不显示编辑按钮。执行命令 php artisan make:Policy QuestionPolicy 生成 QuestionPolicy.php 文件，并在 AuthServiceProvider 的 policies 数组属性里添加授权映射关系。在视图中使用 @can('update', $question) 判断用户是否有权编辑，有权限则显示编辑按钮。
  2. 在请求编辑时，交由 QuestionController 的 edit 方法处理。在 edit 方法中判断用户是否有权编辑，有权限则返回问题编辑的页面视图，并传入 question 参数；无权限则返回警告并跳回上一页。
  3. 展示问题编辑视图，有权限的用户可以看到包含问题标题、选择主题、编辑器容器和发布按钮的编辑页面。编辑器使用 UE.getEditor 实例化，并通过 Select2 实现多选功能。

通过以上步骤，可以在 Laravel Vuejs 项目中实现编辑问题的功能，确保只有问题的作者有权编辑问题，提高了项目的安全性和用户体验。


http://www.kler.cn/a/313258.html

相关文章：

  • 蓝队知识浅谈（上）
  • DOCKER 镜像基础命令
  • Could not initialize class sun.awt.X11FontManager
  • jmeter常用配置元件介绍总结之后置处理器
  • C/C++精品项目之图床共享云存储（3）：网络缓冲区类和main
  • python装饰器的使用以及私有化
  • YoloV9改进策略：BackBone改进|EfficientFormerV2在YoloV9中的创新应用，精度与效率的完美平衡
  • fmql之ubuntu联网
  • 【 ACM独立出版，见刊后1个月检索!!!】第二届通信网络与机器学习国际学术会议（CNML 2024，10月25-27）
  • JS在线加密解密工具
  • 应用性能优化实践（三）减少丢帧卡顿
  • 无线麦克风哪个好，麦克风哪个品牌音质最好，领夹麦克风推荐
  • 可视化工具箱-Visualization Toolkit（VTK）
  • go语言中的数组指针和指针数组的区别详解
  • 【车载开发系列】APQP基本概念
  • IDEA2023.1添加java虚拟机启动参数，打开断言
  • 对接阿里asr和Azure asr
  • KMP算法的实现
  • How can I integrate OpenAI Whisper model into a Kotlin app?
  • 解决 iOS App Tracking Transparency 权限问题
  • windows下，用docker部署xinference，为什么老是提示localhost无法访问？
  • 图说几何学2300年重大错误：附着在直线z上的直线段必是z的一部分
  • WebServer:buffer
  • Intel架构的基本知识
  • 我整理了一些关于【软考备考】的学习资料和大家一起分享、学习一下
  • 《 C++ 修炼全景指南：九 》打破编程瓶颈！掌握二叉搜索树的高效实现与技巧