《智信》平台开发

Emporor

已于 2023-10-23 10:38:08 修改

阅读量101

点赞数

文章标签： html5 javascript jquery css layui npm

于 2023-10-23 09:11:25 首次发布

本文链接：https://blog.csdn.net/emporor/article/details/132730787

版权

需求分析

针对校园内的餐饮、购物、以及相应的服务匮乏，各餐饮窗口，以及校园其它餐饮、商超没有一个统一综合管理，一站式购物以及办理校园其它业务的方式。现在希望搭建一种综合服务类的平台，通过此平台学生可以进行查询各个餐饮食堂，校园超市购物、跑腿以及网上办理校园的业务，并且有相应的配送服务等。

功能介绍

平台设有系统管理员，用户。平台与校园各个餐饮、商超关联，通注册账号进行登录使用。

用户登录过后可以进行查阅浏览网页内容，用户可以在平台可以进行点餐，加购，查询订单信息、个人收藏、校园服务办理、查询/修改用户信息等。

环境搭建

网站搭建所用到的开发工具：vscode+node.js

vscode介绍

Visual Studio Code（简称VSCode）是一款免费且开源的代码编辑器，适用于Windows、macOS和Linux等操作系统。它以轻量级和功能强大而著称，支持语法高亮、代码自动补全（IntelliSense）、代码重构、查看定义功能等特性，并且内置了命令行工具和Git版本控制系统。此外，VSCode也支持多种语言，包括JavaScript、TypeScript和Node.js等。如果你在使用过程中需要将界面语言修改为中文，可以按快捷键“Ctrl+Shift+P”，在搜索框中输入“configure language”进行设置。VSCode不仅优化了编程体验，而且通过其丰富的插件系统，可以极大地扩展其功能。

vscode安装

官方下载页面--->：Visual Studio Code - Code Editing. Redefined（英文官网，大家可以使用Edge浏览器或者Googol浏览器进行翻译）

官网下载

点击下载

选择合适的版本，推荐用户安装程序（System Installer）版本，它可以自定义安装路径，使其我们后期对于它的管理十分方便。

选择同意协议，点击下一步

选择路径

选择安装位置，单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可

注意：为了后期的稳定性，切勿使用中文路径。

选择附加任务

推荐将其他中的所有选项都勾选上，对于创建桌面方式则按需选择是否勾选，看自己所需设置完毕最后单击下一步

注意：添加到PATH一定要勾选，很重要。

确认自己前面设置的是否有误，无误则点击安装即可

VSCode基础配置：

VSCode设置中文界面

因为我们此时安装的VSCode还是英文界面，对于英语不是那么好的小伙伴不是十分友好，所以我们此时需要安装一个插件来对VSCode进行中文化处理。

我们在活动栏区域找到插件安装这个选项，单击它，在搜索框中搜索Chinese 选择第一个即可，选择Install进行安装，安装完毕，右下角会弹出如下提示框，单击Restart重启VSCode即可完成。

插件推荐

vscode-icons

该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标，让你更容易地识别文件

IFlyCode

iFlyCode 是科大讯飞开发的一款智能编码助手插件，可以在程序员编程过程中沉浸式交互生成代码建议，助力程序员提升编码效率和企业敏捷开发。iFlyCode 已适配多种主流编辑器，当前服务处于邀测阶段，点击链接，注册并申请 iFlyCode 试用。

HTML CSS Support

HTML的CSS智能感知，支持链接和嵌入式样式表、支持模板继承、支持其他样式表、支持其他HTML之类的语言、根据需要验证CSS选择器。

JavaScript (ES6) code snippets

ES6语法中的JavaScript代码片段

vetur

这个vue开发者必备的扩展就不多做解释了，代码高亮，补齐等等

layui介绍

Layui 是一套前端 UI 组件库，其设计风格极简化且模块化。遵循原生的 HTML/CSS/JS 开发方式，使得开发者可以更容易地上手使用。此外，Layui 提供了丰富的内置模块，例如：表格、表单、按钮等等。用户可以通过访问官方网站下载到最新版的 Layui，该版本已经过自动化构建，更加适合用于生产环境。总的来说，Layui 是一个开源且易于使用的 Web UI 解决方案，适用于各种前端开发需求。Layui - 极简模块化前端 UI 组件库(官方文档)