【前端】前后端分离ruoyi-vue初步学习

钥钥睡着了

已于 2023-05-06 20:07:50 修改

阅读量923

点赞数

分类专栏：前端文章标签： vue.js 前端学习

于 2023-05-06 15:30:27 首次发布

本文链接：https://blog.csdn.net/qq_45764950/article/details/130357635

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何学习Vue基础知识，运行ruoyi-vue开源项目，修改通知公告页面，添加公告内容长度列和悬浮显示公告内容的功能。同时，文章还涵盖了使用Git进行版本控制，以及在gitee上创建项目仓库和管理分支的操作。

摘要由CSDN通过智能技术生成

1.了解vue基础知识。

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

2.将ruoyi-vue项目拉下来，并成功运行。

开源项目网址：RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.viphttp://www.ruoyi.vip/ 在适当的文件夹内右击点击“Git Bash Here”（需要下载git）

# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

当前运行是有错误的，因为重点在前端开发，为了防止本地部署的困难可选择若依线上的网址，修改如下：(14条消息) 若依接口500异常，前端分离_若依系统接口500异常_herry xiao的博客-CSDN博客

此时启动服务即可正常运行。

3.学习查看项目接口文档，并能够使用浏览器F12开发者工具，查看网页请求情况。(19条消息) 浏览器F12（开发者调试工具）功能介绍_f12键打开网页代码_扶墙而出的博客-CSDN博客

4.修改ruoyi-vue，将通知公告页面中的表格增加一列，列明为“公告内容长度”，用于统计公告内容的字数。

      <el-table-column label="公告内容长度" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.noticeContent.length }}
        </template>
      </el-table-column>

      <el-table-column
        label="公告内容长度"
        align="center"
        prop="noticeContent.length"
        width="100"
      />

5.修改ruoyi-vue，修改通知公告页面，使其将鼠标悬浮放置到公告标题上时能够显示对应的公告内容，而无需再点修改就可查看。

      <el-table-column label="公告标题" align="center" prop="noticeTitle">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.noticeContent">
            <span>{{ scope.row.noticeTitle }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

6.学习git，在gitee上建立项目仓库，对仓库的所有操作使用git指令完成，创建并切换到本地分支dev_qgl，将修改后的项目通过指令更新到远程gitee仓库的分支dev_qgl中。

(18条消息) gitee将本地项目更新到远程仓库指定的分支上_七小山的博客-CSDN博客

(18条消息) git报错:fatal: Couldn't find remote ref master_couldn't find remote ref master2_极品小男的博客-CSDN博客

(18条消息) 【git】本地仓库与远程仓库如何建立连接_git与远程仓库建立连接_与太阳有关_的博客-CSDN博客