request.js

<template> <div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑導航--><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: 'home' }">首頁</el-breadcrumb-item><el-breadcrumb-item>首頁管理</el-breadcrumb-item></el-breadcrumb></div><!--數據--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="狀態"><el-radio-group v-model="status"><el-radio :label="null">全部</el-radio><el-radio :label="0">草稿</el-radio><el-radio :label="1">待審核</el-radio><el-radio :label="2">審核通過</el-radio><el-radio :label="3">審核失敗</el-radio><el-radio :label="4">已刪除</el-radio></el-radio-group></el-form-item><el-form-item label="頻道"><el-select v-model="channelId" placeholder="請選擇頻道"><el-option label="全部" :value="null"></el-option><el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="rangeDate"type="datetimerange"placeholder="選擇日期時間"align="right"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item><el-button type="primary" :disabled="loading" @click="loadArticals(1)">查詢</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根據篩選條件有{{totalCount}}條結果</div><!--數據列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"v-loading="loading"><template slot-scope="scope"><img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" class="artical-cover" alt=""><img v-else class="artical-cover" src="./pic_bg.png" alt=""></template></el-table-column><el-table-columnprop="title"label="標題"></el-table-column><el-table-columnprop="status"label="狀態"><!--如果需要自定義遍歷當前數據--><template slot-scope="scope"><el-tag :type="articalsStatus[scope.row.status].type">{{articalsStatus[scope.row.status].text}}</el-tag><!-- <el-tag v-else-if="scope.row.status===1">待審核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">審核通過</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">審核失敗</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已刪除</el-tag>--></template></el-table-column><el-table-columnprop="pubdate"label="發布時間"></el-table-column><el-table-columnprop="cover"label="操作"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="onDeleteArtical(scope.row.id)" circle></el-button></template></el-table-column></el-table><!--分頁--><el-pagination class="list-table"layout="prev, pager, next":total="totalCount" :page-size="pageSize":disabled="loading"@current-change="OnCurrentChange" ></el-pagination></el-card></div> </template> <script> import {getArtical,deleteArtical,getArticalChannels } from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals(1)this.loadChannels()},data () {return {loading: true,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},status: null, // 狀態為空 查詢文章的狀態totalCount: 0, // 初始數據pageSize: 20, // 每頁大小articals: [], // 記錄文章的數據channels: [],channelId: null, // 文章的頻道rangeDate: null, // 日期數據articalsStatus: [{ status: 0, text: '草稿', type: 'info' },{ status: 1, text: '待審核', type: '' },{ status: 2, text: '審核通過', type: 'success' },{ status: 3, text: '審核失敗', type: 'warning' },{ status: 4, text: '已刪除', type: 'danger' }]}},methods: {// 文章刪除onDeleteArtical (articleId) {this.$confirm('確認刪除嗎', '刪除提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {/* 要刪除的文章id */deleteArtical(articleId.toString()).then(res => {console.log(res)})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})},onSubmit () {console.log('submit!')},loadArticals (page = 1) {this.loading = truegetArtical({page,per_page: this.pageSize,status: this.status,channel_id: this.channelId,/** */begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,end_pubdate: this.rangeDate ? this.rangeDate[1] : null}).then(res => {const { results, total_count: totalCount } = res.data.datathis.totalCount = totalCountthis.articals = results// 關閉加載this.loading = false})},loadChannels () {getArticalChannels().then(res => {console.log(res)this.channels = res.data.data.channels})},OnCurrentChange (page) {this.loadArticals(page)}} }</script> <style scope lang="less"> .filter-card{margin-bottom: 30px; } .list-table{margin-bottom: 20px; } .artical-cover{width: 60px;background-size:cover; } </style>

app.vue

<template><div id="app"><router-view/></div> </template> <script> export default {name: 'App' } </script> <style lang="less"></style>

index.vue

<template><div class="login-container"><!--必須用el-form進行包裹--><div class="login-head"></div><!--配置表單驗證//必須為表單提供驗證對象2添加prop屬性3通過el-form組件庫里面的rules--><el-form class="login-form" ref="login-form" :model="user" :rules="formRules"><el-form-item prop="mobile"><el-input v-model="user.mobile" placeholder="請輸入手機號"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="user.code" placeholder="請輸入驗證碼"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="checked">我已閱讀并同意用戶協議和隱私條款</el-checkbox></el-form-item><el-form-item><el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登錄</el-button></el-form-item></el-form></div> </template><script>import { login } from '@/api/user' export default {name: 'LoginIndex',components: {},props: {},data () {return {user: {mobile: '', // 手機號code: '', // 驗證碼agree: false// 是否同意協議},loginLoading: false, // 登錄的loding狀態/* checked: false, // 是否同意協議 */formRules: {mobile: [{required: true,message: '手機號不能為空',trigger: 'change'},{ pattern: /^1[3|5|7|9]\d{9}$/, message: '請輸入正確的號碼格式', trigger: 'change' }],code: [{required: true,message: '驗證碼不能為空',trigger: 'change'},{ pattern: /^\d{6}$/, message: '請輸入正確的驗證碼格式', trigger: 'change' }],agree: [{// 調用validator: (rule, value, callback) => {if (value) {callback()} else {callback(new Error('請同意用戶協議'))}},trigger: 'change'}]}}},methods: {onLogin () {// 獲取表單數據// const user = this.user// 觸發表單驗證 validate是異步this.$refs['login-form'].validate((valid, err) => {console.log(valid)console.log(err)// 如果if (!valid) {return}this.login()})},login () {// 開啟loadingthis.loginLoading = true// 驗證通過// 請求直接封裝login(this.user).then(res => {console.log(res)this.$message({message: '登錄成功',type: 'success'})this.loginLoading = false}).catch(err => {console.log('登錄失敗', err)this.$message.error({message: '手機號或者驗證碼錯誤',type: 'warning'})this.loginLoading = false})}}} </script> <style scoped lang="less"> .login-container{ position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;background: url("./login_bg.jpg") no-repeat;background-size: cover;.login-head{width: 300px;height: 57px;background:url("./logo_index.png") no-repeat;margin-bottom: 30px;}.login-form{background-color: #fff;padding: 50px;min-width: 300px;.login-btn{width: 100%;}} } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import './styles/index.less' // 加載組件庫 import ElementUI from 'element-ui' // 加載樣式 import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false // 注冊組件庫 Vue.use(ElementUI) new Vue({router,render: h => h(App) }).$mount('#app')

index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Login from '@/views/login/index' Vue.use(VueRouter)// 路由配置表 const routes = [{path: '/login',name: 'login',component: Login }] const router = new VueRouter({routes })export default router

user.js

// 用戶登錄的請求模塊 import request from '@/utils/request'export const login = data => {return request({method: 'POST',url: '/mp/v1_0/authorizations',data}) }// 獲取用戶信息

index.vue

<template><div class="home-container">首頁</div> </template> <script> export default {name: 'HomeIndex',data () {return {}} } </script> <style scoped lang="less"></style>

index.vue

<template><el-container class="layout-container"><el-aside class="aside"><app-aside class="aside-menu"></app-aside></el-aside><el-container><el-header class="header"><div><i class="el-icon-s-fold"></i><span>江蘇傳智播客科技教育有限公司</span></div><el-dropdown><div class="avatar-wrap"><img class="avatar" src="./avatar.jpg" alt=""><span>歌謠</span><i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></div><!--<span>下拉菜單<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>--><el-dropdown-menu slot="dropdown"><el-dropdown-item>設置</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main class="main"><router-view /></el-main></el-container></el-container></template> <script> import AppAside from './component/aside'export default {name: 'LayoutIndex',components: { AppAside },component: {AppAside},data () {return {}} } </script> <style scoped lang="less"> .layout-container{position: fixed;left:0;right:0;top:0;bottom: 0;}.aside{width: 100px;background-color: #d3dce6;.aside-menu{height: 100%;} } .header{height: 60px;background-color: #b3c0d1;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc; } .main{background-color: #e9eef3; } .avatar-wrap{display: flex;align-items: center;.avatar{width: 40px;height: 40px;border-radius: 50%;margin-right: 10px;} } </style>

aside.vue

?

<template> <div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑導航--><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: 'home' }">首頁</el-breadcrumb-item><el-breadcrumb-item>首頁管理</el-breadcrumb-item></el-breadcrumb></div><!--數據--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="狀態"><el-radio-group v-model="form.resource"><el-radio label="全部"></el-radio><el-radio label="查找"></el-radio><el-radio label="待審核"></el-radio><el-radio label="審核通過"></el-radio><el-radio label="審核失敗"></el-radio><el-radio label="已刪除"></el-radio></el-radio-group></el-form-item><el-form-item label="頻道"><el-select v-model="form.region" placeholder="請選擇頻道"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="form.date1"type="datetime"placeholder="選擇日期時間"align="right"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根據篩選條件有1314520條結果</div><!--數據列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"></el-table-column><el-table-columnprop="title"label="標題"></el-table-column><el-table-columnprop="status"label="狀態"><!--如果需要自定義遍歷當前數據--><template slot-scope="scope"><el-tag v-if="scope.row.status===0">草稿</el-tag><el-tag v-else-if="scope.row.status===1">待審核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">審核通過</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">審核失敗</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已刪除</el-tag></template></el-table-column><el-table-columnprop="pubdate"label="發布時間"></el-table-column><el-table-columnprop="cover"label="操作"><template><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" circle></el-button></template></el-table-column></el-table><!--分頁--><el-pagination class="list-table"layout="prev, pager, next":total="1000"></el-pagination></el-card></div> </template> <script> import { getArtical } from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals()},data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},articals: [] // 記錄文章的數據}},methods: {onSubmit () {console.log('submit!')},loadArticals () {getArtical().then(res => {console.log(res)console.log(res)console.log(res)this.articals = res.data.data.results})}} }</script> <style scope lang="less"> .filter-card{margin-bottom: 30px; } .list-table{margin-bottom: 20px; } </style>

?content--->index.vue

<template> <div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑導航--><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: 'home' }">首頁</el-breadcrumb-item><el-breadcrumb-item>首頁管理</el-breadcrumb-item></el-breadcrumb></div><!--數據--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="狀態"><el-radio-group v-model="status"><el-radio :label="null">全部</el-radio><el-radio :label="0">草稿</el-radio><el-radio :label="1">待審核</el-radio><el-radio :label="2">審核通過</el-radio><el-radio :label="3">審核失敗</el-radio><el-radio :label="4">已刪除</el-radio></el-radio-group></el-form-item><el-form-item label="頻道"><el-select v-model="channelId" placeholder="請選擇頻道"><el-option label="全部" :value="null"></el-option><el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="rangeDate"type="datetimerange"placeholder="選擇日期時間"align="right"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item><el-button type="primary" :disabled="loading" @click="loadArticals(1)">查詢</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根據篩選條件有{{totalCount}}條結果</div><!--數據列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"v-loading="loading"><template slot-scope="scope"><img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" class="artical-cover" alt=""><img v-else class="artical-cover" src="./pic_bg.png" alt=""></template></el-table-column><el-table-columnprop="title"label="標題"></el-table-column><el-table-columnprop="status"label="狀態"><!--如果需要自定義遍歷當前數據--><template slot-scope="scope"><el-tag :type="articalsStatus[scope.row.status].type">{{articalsStatus[scope.row.status].text}}</el-tag><!-- <el-tag v-else-if="scope.row.status===1">待審核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">審核通過</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">審核失敗</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已刪除</el-tag>--></template></el-table-column><el-table-columnprop="pubdate"label="發布時間"></el-table-column><el-table-columnprop="cover"label="操作"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="onDeleteArtical(scope.row.id)" circle></el-button></template></el-table-column></el-table><!--分頁--><el-pagination class="list-table"layout="prev, pager, next":total="totalCount" :page-size="pageSize":disabled="loading"@current-change="OnCurrentChange" ></el-pagination></el-card></div> </template> <script> import {getArtical,deleteArtical,getArticalChannels } from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals(1)this.loadChannels()},data () {return {loading: true,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},status: null, // 狀態為空 查詢文章的狀態totalCount: 0, // 初始數據pageSize: 20, // 每頁大小articals: [], // 記錄文章的數據channels: [],channelId: null, // 文章的頻道rangeDate: null, // 日期數據articalsStatus: [{ status: 0, text: '草稿', type: 'info' },{ status: 1, text: '待審核', type: '' },{ status: 2, text: '審核通過', type: 'success' },{ status: 3, text: '審核失敗', type: 'warning' },{ status: 4, text: '已刪除', type: 'danger' }]}},methods: {// 文章刪除onDeleteArtical (articleId) {this.$confirm('確認刪除嗎', '刪除提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {/* 要刪除的文章id */deleteArtical(articleId)}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})},onSubmit () {console.log('submit!')},loadArticals (page = 1) {this.loading = truegetArtical({page,per_page: this.pageSize,status: this.status,channel_id: this.channelId,/** */begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,end_pubdate: this.rangeDate ? this.rangeDate[1] : null}).then(res => {const { results, total_count: totalCount } = res.data.datathis.totalCount = totalCountthis.articals = results// 關閉加載this.loading = false})},loadChannels () {getArticalChannels().then(res => {console.log(res)this.channels = res.data.data.channels})},OnCurrentChange (page) {this.loadArticals(page)}} }</script> <style scope lang="less"> .filter-card{margin-bottom: 30px; } .list-table{margin-bottom: 20px; } .artical-cover{width: 60px;background-size:cover; } </style>

publish-->index.vue

<template><!--card插件--><div class="publish-container"><el-card class="box-card"><div slot="header" class="clearfix"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item><el-breadcrumb-item>發布文章</el-breadcrumb-item></el-breadcrumb><el-form ref="form" :model="form" label-width="80px"><el-form-item label="標題"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="內容"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item label="封面"><el-radio-group v-model="form.resource"><el-radio label="單圖"></el-radio><el-radio label="三圖"></el-radio><el-radio label="無圖"></el-radio><el-radio label="自動"></el-radio></el-radio-group></el-form-item><el-form-item label="頻道"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item>><el-form-item><el-button type="primary" @click="onSubmit">發表</el-button><el-button>存入草稿</el-button></el-form-item></el-form></div></el-card></div> </template> <script> export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit () {console.log('submit!')}} } </script> <style></style>

運行結果

?

總結

以上是生活随笔為你收集整理的前端学习（2450）：页面布局制作的全部內容，希望文章能夠幫你解決所遇到的問題。

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