前端开发-后台信息管理页面的开发流程
1、项目开发流程
1.1、添加路由
1、如下图所示为页面中的路由。进行vue项目开发首先要添加路由。 2、如下所示为路由的实现代码:src/router/index.js
3、要想自己使用模板中的路由,只需要复制上边路由的代码修改即可。 path:为访问路径。外层和内层的两个path值构成了访问路径
name:为页面中路由显示的值
1.2、设置页面跳转路径
在component中设置页面跳转路径 跳转到的页面:
显示的面效果的代码:
-
上边为element-ui布局代码; 下面为javascript代码
<!--element-ui布局代码--> <template> <div class="app-container"> <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row> <el-table-column align="center" label="ID" width="95"> <template slot-scope="scope"> { { scope.$index }} </template> </el-table-column> <el-table-column label="Title"> <template slot-scope="scope"> { { scope.row.title }} </template> </el-table-column> <el-table-column label="Author" width="110" align="center"> <template slot-scope="scope"> <span>{ { scope.row.author }}</span> </template> </el-table-column> <el-table-column label="Pageviews" width="110" align="center"> <template slot-scope="scope"> { { scope.row.pageviews }} </template> </el-table-column> <el-table-column class-name="status-col" label="Status" width="110" align="center"> <template slot-scope="scope"> <el-tag :type="scope.row.status | statusFilter">{ { scope.row.status }}</el-tag> </template> </el-table-column> <el-table-column align="center" prop="created_at" label="Display_time" width="200"> <template slot-scope="scope"> <i class="el-icon-time"/> <span>{ { scope.row.display_time }}</span> </template> </el-table-column> </el-table> </div> </template> <script> <!--模块化操作,引入其他组件--> import { getList } from @/api/table <!--JavaScript代码--> export default { filters: { statusFilter(status) { const statusMap = { published: success, draft: gray, deleted: danger } return statusMap[status] } }, data() { return { list: null, listLoading: true } }, created() { this.fetchData() }, methods: { fetchData() { this.listLoading = true getList(this.listQuery).then(response => { this.list = response.data.items this.listLoading = false }) } } } </script>
1.3、在api文件夹中创建js文件,定义接口路径
注意:上边访问路径还要加上config/dev.env.js中BASE_API的值
1.4、在页面中引入js文件,使用axios进行接口调用,把接口返回的数据在页面显示
上一篇:
IDEA上Java项目控制台中文乱码