[Vue.js]实战 -- 电商项目(二)

最新推荐文章于 2021-07-22 21:30:12 发布
最新推荐文章于 2021-07-22 21:30:12 发布
阅读量265 收藏 3
点赞数
分类专栏： Vue.js 文章标签： vue 电商项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeathDomain/article/details/109559759
版权

主页布局

整体布局
主页布局开始
  • 引入官网的框架时,首先要在element.js中添加
import { 
    Container,
    Header,
    Aside,
    Main
} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="Login.jpg" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #eaedf1;
}
</style>

 

左侧菜单布局
  • 引入官网的框架时,首先要在element.js中添加
import { 
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem
} from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
  • 渲染左侧菜单
<!-- 侧边栏 -->
<el-aside :width="200px">
    <!-- 侧边栏菜单区域 -->
    <!-- unique-opened:每次只展开一个子菜单 -->
    <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
        <!-- 一级菜单 -->
        <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
				<!-- 图标 -->
				<i :class="iconsObj[item.id]"></i>
				<!-- 文本 -->
				<span>{{item.authName}}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
                <template slot="title">
					<!-- 图标 -->
					<i class="el-icon-menu"></i>
					<!-- 文本 -->
					<span>{{subItem.authName}}</span>
                </template>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</el-aside>

 

通过接口获取菜单数据

通过axios请求拦截器添加token，保证拥有获取数据的权限

  • 在main.js文件中添加
// axios请求拦截
axios.interceptors.request.use(config => {
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

 

优化左侧菜单
  • 获取到所有菜单
created() {
    //获取到所有菜单
    this.getMenuList()
},
    methods: {
        async getMenuList() {
            const {data: res} = await this.$http.get('menus')
            if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
            this.menulist = res.data
            console.log(res)
        },
    }

 

  • 实现图标出现
data() {
    return {
        // 左侧菜单数据
        menulist: [],
        iconsObj: {
            '125': 'iconfont icon-user',
            '103': 'iconfont icon-tijikongjian',
            '101': 'iconfont icon-shangpin',
            '102': 'iconfont icon-danju',
            '145': 'iconfont icon-baobiao'
        },
    }
}

 

  • 实现文本与图标的间隙
.iconfont {
    margin-right: 10px;
}

 

  • 实现左侧菜单折叠和展开

    • 在基本样式中添加
    <!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '200px'">
    <div class="toggle-button" @click="toggleCollapse">|||</div>
</el-aside>
    • 在css样式中添加
    .toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
    • 点击按钮，切换菜单的折叠与展开
    <script>
    export default {
		data() {
    		return {

				// 是否折叠
				isCollapse: false,
    		}
		},
		methods: {
			toggleCollapse() {
				this.isCollapse = !this.isCollapse
			}
    	}
	}
</script>

 

路由重定向
  • 创建新的Welcome.vue
  • 在index.js中添加
import Welcome from "../components/Welcome";
const routes = [
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children:[
            {
                path: '/welcome',
                component: Welcome
            }
        ]
    }

]
  • 在右侧内容主体区域添加路由占位符
<el-main>
    <!-- 路由占位符 -->
    <router-view></router-view>
</el-main>

 

用户管理模块

用户管理概述

通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能

  • 用户信息列表展示

  • 添加用户

  • 修改用户

  • 删除用户

  • 启用或禁用用户

  • 用户角色分配

 

用户管理 - 列表展示
用户列表布局

  • 面包屑导航 el-breadcrumb

  • Element-UI 栅格系统基本使用 el-row

  • 表格布局 el-table、el-pagination

  • 创建Users.vue
  • 在index.js中添加
import Users from "../components/user/Users"

const routes = [
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children:[
            {
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/users',
                component: Users
            },
        ]
    }

]

  • 处理高亮问题

    • 在侧边栏菜单区域添加default-active="/users"
    • 在二级菜单中绑定点击事件
    <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)">
</el-submenu>
    • 保存链接的激活状态
    saveNavState(activePath) {
    window.sessionStorage.setItem('activePath', activePath)
    this.activePath = activePath
}
    • 创建一个被激活的链接地址
    activePath: ''
    • 赋值
    created() {
    this.activePath = window.sessionStorage.getItem('activePath')
}

  • 绘制基本ui结构

    • 官网找到面包屑
    <div>
    <!-- 面包屑导航区域 -->
    <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-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
</div>
    • 导入element.js
    import Breadcrumb,BreadcrumbItem from 'element-ui'

Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
    • 官网找到卡片
    <el-card class="box-card">
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>
    • 导入element.js
    import Card from 'element-ui'

Vue.use(Card)
    • 在css样式中添加
    .el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
}

.el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
    • 官网找到搜索与添加
    <!-- 搜索与添加区域 -->
<el-row :gutter="20">
    <el-col :span="8">
        <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </el-col>
    <el-col :span="4">
        <el-button type="primary">添加用户</el-button>
    </el-col>
</el-row>
    • 导入element.js
    import Row,Col from 'element-ui'

Vue.use(Row)
Vue.use(Col)

  • 获取用户列表数据

export default {
    data() {
        return {
            // 获取用户列表的参数对象
            queryInfo: {
                query: '',
                // 当前的页数
                pagenum: 1,
                // 当前每页显示多少条数据
                pagesize: 2
            },
            userlist:[],
            total:0
        }
    },
    created() {
        this.getUserList()
    },
    methods:{
        async getUserList() {
            const { data: res } = await this.$http.get('users', {
                params: this.queryInfo
            })
            //判断
            if (res.meta.status !== 200) {
                return this.$message.error('获取用户列表失败！')
            }
            //赋值
            this.userlist = res.data.users
            this.total = res.data.total
            console.log(res)
        },
    }

}

  • 渲染列表数据

    • 官网找到表格
    <el-table :data="userlist" border stripe>
    <!--添加索引列-->
    <el-table-column type="index"></el-table-column>
    <el-table-column label="姓名" prop="username"></el-table-column>
    <el-table-column label="邮箱" prop="email"></el-table-column>
    <el-table-column label="电话" prop="mobile"></el-table-column>
    <el-table-column label="角色" prop="role_name"></el-table-column>
    <el-table-column label="状态">
    </el-table-column>
    <el-table-column label="操作" width="180px">
    </el-table-column>
</el-table>
    • 导入element.js
    import Table,TableColumn from 'element-ui'

Vue.use(Table)
Vue.use(TableColumn)
    • 添加css样式
    .el-table {
    margin-top: 15px;
    font-size: 12px;
}

 

用户状态列和操作列处理

  • 显示

    • 添加开关
    <el-table-column label="状态">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state">
        </el-switch>
    </template>
</el-table-column>
    • 导入element.js
    import Switch from 'element-ui'

Vue.use(Switch)

  • 操作

    • 添加大小和文字提示
    <el-table-column label="操作" width="180px">
    <template slot-scope="scope">
        <!-- 修改按钮 -->
        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
        <!-- 删除按钮 -->
        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        <!-- 分配角色按钮 -->
        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
        </el-tooltip>
    </template>
</el-table-column>
    • 导入element.js
    import Tooltip from 'element-ui'

Vue.use(Tooltip)

     

表格数据分页

① 当前页码：pagenum

② 每页条数：pagesize

③ 记录总数：total

④ 页码变化事件

⑤ 每页条数变化事件

⑥ 分页条菜单控制

  • 页码显示

    • 添加分页
    <!-- 分页区域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
    • 引入element.js
    import Pagination from 'element-ui'

Vue.use(Pagination)
    • 监听pagesize改变事件
    handleSizeChange(newSize) {
    // console.log(newSize)
    this.queryInfo.pagesize = newSize
    this.getUserList()
}
    • 监听页码值改变事件
    handleCurrentChange(newPage) {
    console.log(newPage)
    this.queryInfo.pagenum = newPage
    this.getUserList()
}
    • 添加css样式
    .el-pagination {
    margin-top: 15px;
}

  • 修改用户状态

    • 官网找到开关
    <el-table-column label="状态">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
        </el-switch>
    </template>
</el-table-column>
    • 监听swich开关状态改变
    // 监听 switch 开关状态的改变
async userStateChanged(userinfo) {
    console.log(userinfo)
    const { data: res } = await this.$http.put(
        `users/${userinfo.id}/state/${userinfo.mg_state}`
    )
    if (res.meta.status !== 200) {
        userinfo.mg_state = !userinfo.mg_state
        return this.$message.error('更新用户状态失败！')
    }
    this.$message.success('更新用户状态成功！')
},

     

  • 搜索功能

    将搜索关键字，作为参数添加到列表查询的参数

    • 添加点击事件
    <el-col :span="8">
    <el-input placeholder="请输入内容" v-model="queryInfo.query">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
    </el-input>
</el-col>
    • 添加输入框,实现可清空效果
    clearable
    • 绑定clear事件
    @clear="getUserList"

 

添加用户

  • 对话框

    • 添加对话框
    <!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
    <!-- 内容主体区域 -->

    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible">确 定</el-button>
    </span>
</el-dialog>
    • 引入element.js
    import Dialog from 'element-ui'

Vue.use(Dialog)

  • 表单

    • 添加表单
    <el-form
         :model="addForm"
         :rules="addFormRules"
         ref="addFormRef"
         label-width="70px"
         >
    <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
</el-form>
    • 添加用户的表单数据
    addForm: {
    username: '',
    password: '',
    email: '',
    mobile: ''
},
    • 添加表单的验证规则对象
    addFormRules: {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
        }
    ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
                min: 6,
                max: 15,
                message: '用户名的长度在6~15个字符之间',
                trigger: 'blur'
            }
        ],
            email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                { validator: checkEmail, trigger: 'blur' }
            ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }
                ]
}

  • 自定义规则

    • 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
    // 验证邮箱的正则表达式
    const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

    if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
    }

    cb(new Error('请输入合法的邮箱'))
}
    • 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
    // 验证手机号的正则表达式
    const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

    if (regMobile.test(value)) {
        return cb()
    }

    cb(new Error('请输入合法的手机号'))
}

  • 预验证

    • 点击按钮,添加新用户
    // 点击按钮，添加新用户
addUser() {
    this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('users', this.addForm)

        if (res.meta.status !== 201) {
            this.$message.error('添加用户失败！')
        }

        this.$message.success('添加用户成功！')
        // 隐藏添加用户的对话框
        this.addDialogVisible = false
        // 重新获取用户列表数据
        this.getUserList()
    })
}

 

修改用户
  • 在修改按钮中添加
@click="showEditDialog(scope.row.id)"
  • 展示编辑用户的对话框
async showEditDialog(id) {
    // console.log(id)
    const { data: res } = await this.$http.get('users/' + id)

    if (res.meta.status !== 200) {
        return this.$message.error('查询用户信息失败！')
    }

    this.editForm = res.data
    this.editDialogVisible = true
},
  • 修改用户的对话框
<!-- 修改用户的对话框 -->
<el-dialog
           title="修改用户"
           :visible.sync="editDialogVisible"
           width="50%"
           @close="editDialogClosed"
           >
    <el-form
             :model="editForm"
             :rules="editFormRules"
             ref="editFormRef"
             label-width="70px"
             >
        <el-form-item label="用户名">
            <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
    </span>
</el-dialog>
  • 控制修改角色对话框的显示隐藏
editDialogVisible: false,
  • 查询到的用户信息对象
editForm: {}
  • 修改表单的的验证规则对象
// 修改表单的验证规则对象
editFormRules: {
    email: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { validator: checkEmail, trigger: 'blur' },
    ],
        mobile: [
            { required: true, message: '请输入用户手机', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' },
        ],
},
  • 绑定close事件,重置关闭后操作
@close="editDialogClosed"

editDialogClosed() {
    this.$refs.editFormRef.resetFields()
},
  • 修改用户信息并提交
editUserInfo() {
    this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.put(
            'users/' + this.editForm.id,
            {
                email: this.editForm.email,
                mobile: this.editForm.mobile,
            }
        )

        if (res.meta.status !== 200) {
            return this.$message.error('更新用户信息失败！')
        }

        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功！')
    })
}

 

删除用户
  • 官网找到弹框
  • 导入element.js
import MessageBox from 'element-ui'
// 全局挂载
Vue.prototype.$confirm = MessageBox.confirm
  • 绑定单击事件
@click="removeUserById(scope.row.id)"
  • 根据id删除对应的用户信息
async removeUserById(id) {
    // 弹框询问用户是否删除数据
    const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch((err) => err)

    // 如果用户确认删除，则返回值为字符串 confirm
    // 如果用户取消了删除，则返回值为字符串 cancel
    // console.log(confirmResult)
    if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
    }

    const { data: res } = await this.$http.delete('users/' + id)

    if (res.meta.status !== 200) {
        return this.$message.error('删除用户失败！')
    }

    this.$message.success('删除用户成功！')
    this.getUserList()
}

 

分配角色
  • 官网找到select和option并导入
import { 
  Option,
  Select
} from 'element-ui'

Vue.use(Option)
Vue.use(Select)
  • 分配角色对话框
<el-dialog
           title="分配角色"
           :visible.sync="setRoleDialogVisible"
           width="50%"
           @close="setRoleDialogClosed"
           >
    <div>
        <p>当前的用户：{{ userInfo.username }}</p>
        <p>当前的角色：{{ userInfo.role_name }}</p>
        <p>
            分配新角色：
            <el-select v-model="selectedRoleId" placeholder="请选择">
                <el-option
                           v-for="item in rolesList"
                           :key="item.id"
                           :label="item.roleName"
                           :value="item.id"
                           >
                </el-option>
            </el-select>
        </p>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
    </span>
</el-dialog>
  • 监听分配角色对话框的关闭事件
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
    this.selectedRoleId = ''
    this.userInfo = {}
},
  • 展示分配角色的对话框
// 展示分配角色的对话框
async setRole(userInfo) {
    this.userInfo = userInfo

    // 在展示对话框之前，获取所有角色的列表
    const { data: res } = await this.$http.get('roles')
    if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败！')
    }

    this.rolesList = res.data

    this.setRoleDialogVisible = true
},
  • 点击按钮，分配角色
// 点击按钮，分配角色
async saveRoleInfo() {
    if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色！')
    }

    const { data: res } = await this.$http.put(
        `users/${this.userInfo.id}/role`,
        {
            rid: this.selectedRoleId,
        }
    )

    if (res.meta.status !== 200) {
        return this.$message.error('更新角色失败！')
    }

    this.$message.success('更新角色成功！')
    this.getUserList()
    this.setRoleDialogVisible = false
},
  • 监听分配角色对话框的关闭事件
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
    this.selectedRoleId = ''
    this.userInfo = {}
},
^ω^奋斗小青年
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue电商项目
qq_46159864的博客
04-19 1016
vue电商项目的总结 1、项目描述 1、此项目为一个前后端分离的 电商实战项目 2、采用了Vue全家桶+ES6+Webpack 等前端最新技术 3、项目包括商家、商品、用户、等多个功能子模块 4、采用模块化、组件化、工程化的模式开发 项目文件 2 项目的构建 2.1 项目开发流程及开发方法和思想 1、熟悉一个项目开发的流程 2、学会组件化、模块化、工程化的开发模式 3、掌握使用vue-cli脚手...
Vue电商项目—用户管理模块-05
weixin_44549096的博客
03-14 821
Vue电商项目—用户管理模块 1.1 用户管理概述 通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。 1.2 用户管理-列表展示 1. 用户列表布局 用到的组件 （1）面包屑导航 el-breadcrumb （2）Element-UI 栅格系统基本使用 el-row （3）表格布局 el-table、el-pagination 2. 用户状态列和操作列处理  作用域插槽  接口调用 <!-- 通过作用域插槽中的 scope-r
vue.js从入门到深入再到随心而用————vue电商项目005(分类管理模块、参数管理模块)
Belief的博客
05-12 843
基于element-ui完成的vue项目，这篇博客来说说分类管理和参数管理两个模块的完成。大家感兴趣可以进来看看哦，用了很多炫酷的组件，同时也收获了很多，会持续更新的哦！！！
[Vue.js]实战 -- 电商项目(四)
DeathDomain的博客
11-10 355
分类管理 商品分类概述 商品分类用于在购物时，快速找到所要购买的商品，可以通过电商平台主页直观的看到   商品分类列表 基本布局与数据获取 基本布局 面包屑导航区域 <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item&
mysql-电商数据建表_MySQL-电商数据建表
weixin_39939661的博客
02-05 234
最近准备结合MVC架构和前后端知识，做一个电商的项目练手，其中因为是电商网站，自然涉及到很大的数据量，对于一个商品而言，正确的数据分类和联系，是很重要的，以下简单记录一下，项目开始之前，数据库表，应该如何建立的初步思路，仅供参考学习php5.4.3mysql5.5.24apache 2.2.22wamp环境下开发电商数据库简单建表原则对于一个简单的商品而言，它本身就具备一个很庞大的关系链。以JD的...
Vue.js-project:使用电商公司个后台网站
03-13
综上所述，这个Vue.js项目涵盖了前端开发的多个方面，包括但不限于框架应用、UI组件、数据库交互、API设计、状态管理、路由、部署和测试，是一个全面展示Vue.js技术栈和前后端协作能力的实战案例。
个人vue实战项目---电商类-e_shop.zip
11-04
本项目“个人vue实战项目---电商类-e_shop”是基于Vue.js开发的一个电商应用，旨在帮助开发者实践Vue.js在实际项目中的应用，提升前端开发技能。 1. **Vue.js基础** - **Vue实例**：项目的入口文件通常会创建一个...
VUE.js高仿饿了么商城实战项目源码（未打包文件）
11-09
在这个"Vue.js高仿饿了么商城实战项目"中，你可以深入学习和实践如何利用Vue.js来构建复杂的Web应用程序，特别是电商类平台。项目未打包，这意味着你将有机会查看原始代码并理解其工作原理。 1. **Vue.js基础**：...
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
在本项目中，我们使用Vue.js构建了一个微商城应用，结合Node.js作为后端服务器，为用户提供了一套完整的电商解决方案。以下将详细介绍如何理解和部署这个Vue-shop项目。 首先，确认你的开发环境。由于项目明确要求...
vue电商项目前端原型
08-01
项目其他依赖都弄好了,下载下来后进入项目目录下，输入npm run dev回车后就启动项目了，页面访问http://localhost:8080
vue电商项目.rar
10-21
vue电商项目中前端技术运用了vue.js，路由导航守卫，路由懒加载，组件模块化开发，axios异步发送请求，element-UI页面布局，echarts图表制作等，后台使用Node.js，Express，Jwt (模拟session)，Mysql，Sequelize (操作数据库的框架)提供后台服务。
基于Vue的完整电商系统
01-10
基于SpringBoot+MyBatis实现。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。
Vue电商项目—权限管理模块-06
weixin_44549096的博客
03-15 278
Vue电商项目—权限管理模块 1.1 权限管理业务分析 1.2 权限列表展示 <!-- 卡片视图 --> <el-card> <el-table :data="rightsList" style="width: 100%" border stripe> <el-table-column type="index" label="序号"></e
vue电商项目归纳总结（1）
接着奏乐接着舞的博客
07-22 1646
1.吸顶效果 2.组装数据 3.轮播图
电商后台管理系统添加编辑和删除商品分类
实践求真知
08-31 2837
目录 一代码 1修改Cate.vue 2修改 element.js 二效果 三源码参考 一代码 1修改Cate.vue <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path:...
vue项目第二阶段
码化疼
10-26 606
###今日目标 1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 ###1.后台首页基本布局 打开Home.vue组件，进行布局： <el-container class="home-container"> <!-- 头部区域 --> <el-header>Header<el-button type="info...
Vue电商网站项目开发总结
热门推荐
money_yao的博客
04-28 1万+
实现的功能： 基于vue.js的知识点（webpack，Vuex，Vue-router）开发电商网站项目，实现的功能包括：商品列表按照价格、销量排序；商品列表按照品牌、价格过滤；动态的购物车，使用优惠码等。 main.js： 路由配置（router），使用History路由模式 状态管理（Vuex，store），设置了state、getters、mutations、acti...
nodeJS之解决巧用promise对象解决数据库查询逻辑
chisi3580的博客
08-13 1081
一.该函数返回指定回调callback的promise对象 const getPro = function(callback) { return new Promise(callback) } 二.创建promise实例解决回调地狱问题,难点: 1.抽离promise对象的构...
vue项目实战-电商后台管理系统
最新发布
02-18
Vue项目实战-电商后台管理系统是一个基于Vue框架开发的前端项目，用于管理电商网站的后台业务。该项目包含了常见的电商后台管理功能，如商品管理、订单管理、用户管理等。 以下是该项目的一些特点和实现方式： 1. 使用Vue.js框架：Vue.js是一个轻量级的JavaScript框架，具有响应式数据绑定和组件化开发的特点，适合构建单页面应用。 2. 使用Vue Router进行路由管理：Vue Router是Vue.js官方提供的路由管理插件，可以实现前端路由的配置和跳转。 3. 使用Vuex进行状态管理：Vuex是Vue.js官方提供的状态管理插件，可以集中管理应用的状态，并实现状态共享和响应式更新。 4. 使用Element UI进行界面设计：Element UI是一套基于Vue.js的UI组件库，提供了丰富的组件和样式，可以快速构建美观的后台管理界面。 5. 实现权限管理：通过路由守卫和权限控制中间件，可以对用户进行权限验证和访问控制，确保只有具备相应权限的用户才能进行操作。 6. 实现数据交互：通过与后端API进行数据交互，实现商品列表展示、订单管理、用户信息修改等功能。 7. 实现数据可视化：使用ECharts等数据可视化工具，将数据以图表的形式展示，方便管理员进行数据分析和决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值