前端開發-后臺信息管理頁面的開發流程

• 1、項目開發流程
• • 1.1、添加路由
  • 1.2、設置頁面跳轉路徑
  • 1.3、在api文件夾中創建js文件，定義接口路徑
  • 1.4、在頁面中引入js文件，使用axios進行接口調用，把接口返回的數據在頁面顯示

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-tablev-loading="listLoading":data="list"element-loading-text="Loading"borderfithighlight-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 = truegetList(this.listQuery).then(response => {this.list = response.data.itemsthis.listLoading = false})}} } </script>

1.3、在api文件夾中創建js文件，定義接口路徑

注意：上邊訪問路徑還要加上config/dev.env.js中BASE_API的值

1.4、在頁面中引入js文件，使用axios進行接口調用，把接口返回的數據在頁面顯示

總結

以上是生活随笔為你收集整理的前端开发-后台信息管理页面的开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。