网站建设第一品牌 网站设计,wordpress 为静态页面,wordpress 跳转适配,网站seo方案模板医院信息化与智能化系统(6)
这里只描述对应过程#xff0c;和可能遇到的问题及解决办法以及对应的参考链接#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图#xff0c;可以试试PlantUML#xff0c;告诉GPT你的文件结构#xff0c;让他给你对应的…医院信息化与智能化系统(6)
这里只描述对应过程和可能遇到的问题及解决办法以及对应的参考链接并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图可以试试PlantUML告诉GPT你的文件结构让他给你对应的代码
预约挂号微服务模块搭建
前端知识点补充此章节不会详细讲具体前端的每个知识点
1、npm run dev
在终端输入启动项目的命令npm run dev语句会直接进入模版网页中但我们需要了解一下大致的流程。
它会首先找到package.json 文件npm 会查看项目根目录下的 package.json 文件寻找 scripts 部分的 dev 脚本定义。
随后它会执行该脚本
dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
这条命令的作用是启动一个 Webpack 开发服务器支持内联热模块替换显示打包进度并使用指定的 Webpack 配置文件进行打包。
在webpack.dev.conf.js文件中有一个语句
const baseWebpackConfig require(./webpack.base.conf)作用是导入一个通用的 Webpack 配置文件并允许在当前的配置文件中使用这些基础配置。
那来分析一下这个webpack.base.conf.js的部分
入口名称 app
入口文件src文件夹下的main.js
filename指定输出文件的名称这里使用 [name].js其中 [name] 将被入口名称替换app.js。
HtmlWebpackPlugin: 该插件生成一个 HTML(index.html) 文件并自动将打包后的 main.js文件注入到 该HTML作为用户在浏览器中看到的页面结构。 entry: {app: ./src/main.js},output: {path: config.build.assetsRoot,filename: [name].js,...}...plugins: [new HtmlWebpackPlugin({filename: index.html,template: index.html,inject: true,favicon: resolve(favicon.ico),title: vue-admin-template})]为了理清楚工程文件
index.html:项目的入口文件。它包含基本的 HTML 结构其中div idapp/div是用于挂载 Vue 实例的元素。所有的 Vue 组件最终都会渲染到这个 div 中。
main.js:Vue 项目的重要文件负责初始化应用。它导入 Vue 库、应用的核心组件如 App.vue、路由配置如 router/index.js和状态管理如 store/index.js。在这里创建 Vue 实例并将其挂载到 #app 元素上。
App.vue:应用的核心组件负责结构和路由管理。它通常包含 router-view/组件用于动态渲染当前路由对应的视图。App.vue 还可以包含全局样式和布局。通过 Vue RouterApp.vue 控制页面的切换实现单页面应用的功能。
还有一个理解(可能需要考虑是否正确)
main.js主要负责导入依赖如 Vue、插件、样式库等并在此处建立整个应用的模块之间的依赖关系。由于它是应用的入口文件Webpack 会打包这个文件及其所有导入的依赖确保这些依赖在浏览器中可用。
App.vue主要是作为一个组件的定义负责导入其他组件并构建应用的 UI 结构。它内部的组件和逻辑将被 main.js 导入并渲染形成完整的应用视图。
因此main.js 作为依赖导入的中心文件负责初始化和设置而 App.vue 则作为组件的容器负责构建用户界面。 继续看代码
在webpack.dev.conf.js中process.env: require(../config/dev.env)代码表示了一个全局常量值该文件是一个js文件指定了默认访问后端的接口路径BASE_API后续可能要根据自己的路径进行修改。
在该文件的同一目录下有一个名为index.js的文件这里有几个需要关注的值。 host: localhost 当前项目主机名port: 9528 当前项目端口号useEslint: true 代码检查插件可以改为false
2、登录代码改造
遇到的问题默认情况下前端项目已经实现了登录功能后端连接到远程Mock平台的模拟数据接口进行登录而Mock平台地址无效导致前端的登录功能无法执行.
解决方法是修改.\src\store\modules\user.js中的部分代码
此处主要的问题是调用一个名为login的函数。当 login 函数成功返回时执行这个回调response 是从服务器返回的响应。应对方法是设置一个默认的data对象里面包含token默认值。 actions: {// 登录Login({ commit }, userInfo) {const data {token:admin}setToken(data.token)commit(SET_TOKEN, data.token)// const username userInfo.username.trim()// return new Promise((resolve, reject) {// login(username, userInfo.password).then(response {// const data response.data// setToken(data.token)// commit(SET_TOKEN, data.token)// resolve()// }).catch(error {// reject(error)// })// })}获取用户信息部分同理其中roles表示用户角色avatar表示头像
// 获取用户信息GetInfo({ commit, state }) {const data {roles:admin,name:admin,avatar:https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif}if (data.roles data.roles.length 0) { // 验证返回的roles是否是一个非空数组commit(SET_ROLES, data.roles)} else {reject(getInfo: roles must be a non-null array !)}commit(SET_NAME, data.name)commit(SET_AVATAR, data.avatar)// return new Promise((resolve, reject) {// getInfo(state.token).then(response {// const data response.data// if (data.roles data.roles.length 0) { // 验证返回的roles是否是一个非空数组// commit(SET_ROLES, data.roles)// } else {// reject(getInfo: roles must be a non-null array !)// }// commit(SET_NAME, data.name)// commit(SET_AVATAR, data.avatar)// resolve(response)// }).catch(error {// reject(error)// })// })},登出与前端登出代码操作同理
在./src/utils/request.js找到
config.headers[X-Token] getToken()语句并将X-Token对应改为我们之前代码中配置的token
3、框架开发流程
第一步是添加路由
在router/index.js是在 Vue.js 项目中用于配置路由的文件负责定义页面访问路径与组件之间的映射关系。
以其中部分代码作为讲解
path: /example 是定义的一级路由路径当用户访问 /example 路径时系统会匹配到这个路由配置。
redirect: /example/table 定义了路由的重定向行为当访问/example时会自动重定向到 /example/table即用户访问 /example 时直接跳转到表格页面。
name: Example为这个路由配置指定一个名字。通常 name 属性在需要通过编程导航到该路由时使用比如 router.push({ name: Example })
meta: { title: Example, icon: example } 其中meta 是路由的元信息可以包含任意自定义属性。这段元数据中的 title 会作为页面标题显示icon 表示这个页面在菜单中对应的图标值为 example 的图标
children: [...]是这个路由的子路由配置表示 ·/example下包含两个子路由table 和 tree用于展示不同的内容。
第二步是设置跳转页面路径
component: () import(/views/table/index): 使用懒加载的方式加载组件只有访问到该路由时才会异步加载该组件节省资源。
{path: /example,component: Layout,redirect: /example/table,name: Example,meta: { title: Example, icon: example },children: [{path: table,name: Table,component: () import(/views/table/index),meta: { title: Table, icon: table }},{path: tree,name: Tree,component: () import(/views/tree/index),meta: { title: Tree, icon: tree }}]}第三步 在api文件夹创建js文件用来封装和后端交互的请求逻辑
以 component: () import(/views/table/index)为例它跳转的其实是index.vue文件
创建API在 api 文件夹中创建一个 table.js 文件用来封装和后端交互的请求逻辑。
import request from /utils/request; // 通常会有一个封装好的请求工具// 获取表格数据
export function fetchTableData(query) {return request({url: /api/table/list, // 后端 API 地址method: get,params: query});
}/utils/request 文件的核心功能就是基于 axios 或其他 HTTP 库统一封装 HTTP 请求的逻辑包括
配置基础 URL简化 API 请求路径。请求拦截器添加 Token 或其他公共请求头。响应拦截器统一处理响应数据和错误。错误处理简化每个 API 请求的异常处理。请求超时、取消重复请求等功能提高用户体验。
第四步 在页面引入js文件使用axios进行调用
调用 API 并展示数据 在 views/table/index.vue 中通过引入api/table.js中的方法获取数据并将数据展示在页面上。
