您的位置 首页 java

web全栈：java微服务+vue+elemUI开发CMS1

智云科技 发布于 2023年1月2日 评论关闭 阅读(150)

1.vue前端搭建项目

1.1vue.js安装

vue

Vue官网：

教程入口：

1.2node.js安装

node

node官网：

1.3vue CLI安装

官网：

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

vue-cli

1.4编译器idea更新控制台terminal的输出为git

idea-配置gitee

gitee源码开放：

2.查看node、vue、vue/cli版本

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/ springcloud /yameng-webcourse (master)

$ npm -v 查看node版本

6.13.4

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-webcourse (master)

$ vue –version 查看当前vue版本

2.9.6

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-webcourse (master)

$ npm install -g @vue/cli 安装/升级vue-cli最新版

npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to ‘joi’ (

npm WARN deprecated request@2.88.2: request has been deprecated, see

npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained

vue-cli升级失败

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

npm ERR! code EEXIST

npm ERR! path C:\Users\asus\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

npm ERR! dest C:\Users\asus\AppData\Roaming\npm\vue

npm ERR! EEXIST: file already exists, cmd shim ‘C:\Users\asus\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js’ -> ‘C:\Users\asus\AppData\Roaming\npm\vue’

npm ERR! File exists: C:\Users\asus\AppData\Roaming\npm\vue

npm ERR! Remove the existing file and try again, or run npm

npm ERR! with –force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\asus\AppData\Roaming\npm-cache\_logs\2020-07-19T13_45_04_918Z-debug.log

$ vue create admin 创建vue项目，必须升级vue-cli 3.0以上

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.

You may want to run the following to upgrade to Vue CLI 3:

npm uninstall -g vue-cli

npm install -g @vue/cli

$ npm uninstall -g vue-cli 卸载vue-cli

removed 241 packages in 3.064s

$ npm install -g @vue/cli 安装升级@vue/cli

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-webcourse (master)

$ vue –version

@vue/cli 4.4.6 升级完成

3.创建后台cms-admin前端项目

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-cevent-source-cloudcenter/cevent-source-cloudcenter (master)

$ vue create cevent-ymcms-admin

Vue CLI v4.4.6

┌─────────────────────────────────────────────┐

│ │

│ New version available 4.4.6 → 4.5.11 │

│ Run yarn global add @vue/cli to update! │

│ │

└─────────────────────────────────────────────┘

? Please pick a preset: default (babel, eslint)

Vue CLI v4.4.6

✨ Creating project in D:\DEV_CODE\Intelligy_idead_code\spring\springcloud\yameng-cevent-source-cloudcenter\cevent-source-cloudcenter\cevent-ymcms-admin.

⚙️ Installing CLI plugins. This might take a while…

> yorkie@2.0.0 install D:\DEV_CODE\Intelligy_idead_code\spring\springcloud\yameng-cevent-source-cloudcenter\cevent-source-cloudcenter\cevent-ymcms-admin\node_modules\yorkie

> node bin/install.js

setting up Git hooks

…

⚓ Running completion hooks…

� Generating README.md…

� Successfully created project cevent-ymcms-admin.

� Get started with the following commands:

$ cd cevent-ymcms-admin

$ npm run serve

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-cevent-source-cloudcenter/cevent-source-cloudcenter (master)

$ cd cevent-ymcms-admin/

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-cevent-source-cloudcenter/cevent-source-cloudcenter/cevent-ymcms-admin (master)

$ npm run serve

> cevent-ymcms-admin@0.1.0 serve D:\DEV_CODE\Intelligy_idead_code\spring\springcloud\yameng-cevent-source-cloudcenter\cevent-source-cloudcenter\cevent-ymcms-admin

> vue-cli-service serve

INFO Starting development server…

98% after emitting CopyPlugin

DONE Compiled successfully in 2896ms 21:49:14

App running at:

– Local:

– Network:

idea项目

vue启动

4.引入element-UI框架

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-webcourse (master)

$ cd web-client/

asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-webcourse/web-client (master)

$ npm install element-ui -S 安装

npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

>

core-js@2.6.12 postinstall D:\DEV_CODE\Intelligy_idead_code\spring\springcloud\yameng-webcourse\web-client\node_modules\babel-runtime\node_modules\core-js

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

>

>

+ element-ui@2.15.1

added 9 packages from 8 contributors in 11.703s

49 packages are looking for funding

run `npm fund` for details

5.main.js引入element-UI

element-ui

6.构建登录页面

6.1引入bootstrap栅格系统

列数column=12

超小屏幕 手机 (<768px)

小屏幕 平板

(≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

栅格系统行为

总是水平排列

开始是堆叠在一起的，当大于这些阈值时将变为水平排列

.container 最大宽度

None （自动）

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

最大列（column）宽

自动

~62px

~81px

~97px

槽（gutter）宽

30px （每列左右均有 15px）

偏移（Offsets）

使用 .col-md-offset-* 类可以将列向右侧偏移（间隔）

6.2eslint语法规则

* “off” 或 0 – 关闭规则

* “warn” 或 1 – 开启规则，使用警告级别的错误：warn (不会导致程序退出)

* “error” 或 2 – 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

“no-alert”

禁止使用alert confirm prompt

“no-array-constructor”

禁止使用数组构造器

“no-bitwise”

禁止使用按位运算符

取消检测在.eslintrc.js中申明off，或在package.json中关闭0

eslint

6.3引用第三方js特效

js特效

html引入

vue组件引入

效果图

7.Components-LoginComp.vue页面展现内容 

 <template>
    <div class="admin-login container">
        <el-menu  class="elMenu el-menu-demo" mode="horizontal" background-color="#021126" text-color="#14ddaa">
            <span class="elMenuText" >企业ERP、CMS、CRM、OA多功能融合SpringCloud微服务系统</span>
        </el-menu>

        <div class="row center-block ">
            <div class="login-block col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
                <h1 class="logo-title"><img src="../../public/imgs/yameng-logo-1.png" alt="logo" class="logo-set ">亚盟CMS后台登录
                </h1>
                <div class="login-box jumbotron">
                    <div class="login-box-header">
                        <h2 class="header-title">一站式ERP电商管理系统</h2>
                    </div>
                    <div class="login-input">
                        <div class="inputArea">
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon">账号</span>
                                <input id="loginName" type="text" class="inputSpan form-control" placeholder="请输入用户名"
                                       aria-describedby="sizing-addon1">
                                <span class="inputTag glyphicon glyphicon-user form-control-feedback text-primary"
                                      aria-hidden="true"></span>
                                <div class="input1-show input-group-addon"></div>
                            </div>
                            <div class="input-group input-group-lg">
                                <span class="input-group-addon ">密码</span>
                                <input id="loginPWD" type="password" class="inputSpan form-control" placeholder="请输入密码"
                                       aria-describedby="sizing-addon1">
                                <span class="inputTag glyphicon glyphicon-lock form-control-feedback text-primary"
                                      aria-hidden="true"></span>
                                <div class="input2-show input-group-addon"></div>
                            </div>
                        </div>

                        <el-checkbox class="rememberBox" v-model="remember" label="记住账号·密码" border></el-checkbox>

                        <el-button class="loginBtn" type="primary">登录<i class="el-icon-s-promotion el-icon--right "></i>
                        </el-button>

                    </div>

                </div>

            </div>
            <div class="line"></div>
            <div class="loginFooter">
                <div class="loginBottom">

                    <el-menu  class="elMenu el-menu-demo" mode="horizontal" background-color="#021126" text-color="#14ddaa">
                        <span class="elMenuText" >Technology By @Cevent 2021</span>
                        <div>
                            <img class="bottom-logo" src="../../public/imgs/yameng-logo-1.png">
                        </div>
                    </el-menu>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    //import "../../public/base/js/login/three.min.js";
    //import "../../public/base/js/login/TweenMax.min.js";
    //import "../../public/base/js/login/loginBG.js";
    export default {
        name: 'LoginComp',
        props: {
            msg: String
        },
        data() {
            return {
                message: '这里是登录页面',
                input: '',
                remember: true,

            }
        },
        methods: {},
    }
</script>

<style scoped>

    .admin-login {
         position : absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: url("../../public/imgs/BG-WALL.png");
        background-size: 100% 100%;
        overflow: hidden;
    }

    .logo-set {
        width: 40px;
        margin-right: 5px;
        margin-bottom: 6px;
    }

    .login-block {
        position: relative;
        margin-top: 5%;
        margin-bottom: 10%;
        border: 2px solid white;
        border-radius: 5px;
        box-shadow: 2px 2px 5px steelblue;
        color: white;
        background: url("../../public/imgs/BG-WALL.png");
    }

    .logo-title {
        display: block;
        font-size: 24px;
    }

    .inputArea {
        float: left;
    }

    .login-box {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10%;
        padding: 5px;
        max-width: 600px;
    }

    .login-input {
        position: relative;
        margin: 5px;

    }

    .header-title {
        color: steelblue;
        font-weight: bolder;
        text-shadow: 0px 1px 0px #ffffff, 0px 2px 0px #e2d6d6, 0px 3px 0px #e2d6d6, 0px 4px 0px #e2d6d6, 0px 7px 0px #fff3cd, 0px 8px 7px #ffffff;
    }

    .inputSpan {
        max-width: 500px;
    }

    .inputTag {
        margin-top: 5px;
    }

    .rememberBox {
        position: relative;
        margin-top: 10px;
        margin-left: 30%;
        margin-bottom: 10px;
        float: left;
        color: steelblue;
    }

    .loginBtn {
        margin-top: 10px;
        background: steelblue;
        border: 2px solid white;
    }
    .loginFooter{
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    .loginBottom {
        position: relative;
        background: steelblue;

    }

    .elMenu{
        text-align: center;
    }
    .elMenu .elMenuText{
        display: block;
        font-size: 20px;
        margin: 20px auto;
        color: white;
    }

    .bottom-logo {
        position: relative;
        width: 50px;
        margin-bottom: 10px;
    }
</style>

8.登录页面效果图

login登录页

响应式

9.admin管理页面首页显示

引入elementUI分栏栅格布局

参数

说明

类型

默认值

span

栅格占据的列数

number

24

offset

栅格左侧的间隔格数

number

0

push

栅格向右移动格数

number

0

pull

栅格向左移动格数

number

0

:xs

<768px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

:sm

≥768px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

:md

≥992px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

:lg

≥1200px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

:xl

≥1920px 响应式栅格数或者栅格属性对象

number/object (例如： {span: 4, offset: 4})

gutter

栅格间隔

number

0

justify

flex 布局下的水平排列方式

String

start/end/center/space-around/space-between

Start

align

flex 布局下的垂直排列方式

String

top/middle/bottom

top

10.admin.vue修改页面样式，改装elementUI 

 <template>
    <div class="">
        <div class="admin-nav">
            <el-menu
                    :default-active="activeIndex2"
                    class="navTopElMenu el-menu"
                    mode="horizontal"
                    @select="handleSelect"
                    text-color="#fff"
            >

                <el-menu-item class="navBarLogoBlock">
                    <img class="navbarLogo" src="../../public/imgs/site-logo300-1.png" alt="">
                    <span class="logoTitle">亚盟微服务管理控台</span>
                </el-menu-item>
                <div class="navTopRight">
                    <el-dropdown class="navTopItem">
                        <img class="loginIcon el-dropdown-link" :src="url">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <li class="privilege el-icon-trophy"></li>
                                <span class="privilegeTitle">您在系统拥有 4 项特权</span>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <li class="privilege el-icon-bank-card"></li>
                                账号余额
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <li class="privilege el-icon-postcard"></li>
                                积分
                            </el-dropdown-item>
                            <el-dropdown-item disabled>
                                <li class="privilege el-icon-s-flag"></li>
                                平台认证
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <li class="sets el-icon-s-tools"></li>
                                <span class="setsSpan">设置</span>
                            </el-dropdown-item>
                            <router-link to="/login">
                                <el-dropdown-item>
                                    <li class="sets el-icon-s-unfold"></li>
                                    <span class="setsSpan">退出登录</span>
                                </el-dropdown-item>
                            </router-link>

                        </el-dropdown-menu>
                    </el-dropdown>

                    <div class="navTopItem">
                        <li class="el-icon-paperclip"></li>
                        <span class="loginInfo">欢迎 cevent 登录</span>
                    </div>

                    <el-dropdown class="navTopItem">
                        <div class="topMsg">
                            <li class="el-icon-message-solid"></li>
                            <el-divider direction="vertical"></el-divider>
                            <span class=" el-dropdown-link">
                            消息中心
                            </span>
                            <el-badge :value="12" class="item">
                            </el-badge>
                        </div>

                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>消息通知
                                <el-badge :value="2" class="item">
                                </el-badge>
                            </el-dropdown-item>
                            <el-dropdown-item>产品评论
                                <el-badge :value="4" class="item">
                                </el-badge>
                            </el-dropdown-item>
                            <el-dropdown-item>客户回复
                                <el-badge :value="9" class="item">
                                </el-badge>
                            </el-dropdown-item>
                            <el-dropdown-item disabled>问题邀请
                                <el-badge :value="1" class="item">
                                </el-badge>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-menu>
            <!--<div class="breadNav"></div>-->
        </div>
        <div class="admin-nav-content">
            <div class="admin-nav-left">
                <el-row class="tac">
                    <el-col :xs="9" :sm="6" :md="5" :lg="4">
                        <!--default-openeds="['1-1','2-1','3-1','4-1']"-->
                        <el-menu default-active="0-1"
                                 class="navLeftMenu el-menu-vertical"
                                 @open="handleOpen"
                                 @close="handleClose"
                                 :collapse="isCollapse"
                        >
                            <div class="">
                                <el-submenu class="navLeftItem " index="0">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-data"></i>
                                        <span slot="title">数据中心</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item class="navLeftItemTitle menuItem active"
                                                      index="0-1">
                                            <div class="gutterItem"></div>
                                            站点数据
                                        </el-menu-item>
                                        <el-menu-item  class="navLeftItemTitle menuItem"
                                                       index="0-2">
                                            <div class="gutterItem"></div>
                                            询盘数据
                                        </el-menu-item>
                                        <el-menu-item  class="navLeftItemTitle menuItem "
                                                       index="0-3">
                                            <div class="gutterItem"></div>
                                            客户数据
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                                <el-submenu class="navLeftItem " index="1">
                                    <div class="navLeftItemTitle" slot="title">
                                        <i class="leftIcon el-icon-s-tools"></i>
                                        <span slot="title">系统管理</span>
                                    </div>
                                    <div class="leftItem">
                                        <el-menu-item class="navLeftItemTitle menuItem active"
                                                      index="1-1">
                                            <div class="gutterItem"></div>
                                            角色管理
                                        </el-menu-item>
                                        <el-menu-item  class="navLeftItemTitle menuItem"
                                                      index="1-2">
                                            <div class="gutterItem"></div>
                                            权限管理
                                        </el-menu-item>
                                        <el-menu-item  class="navLeftItemTitle menuItem "
                                                      index="1-3">
                                            <div class="gutterItem"></div>
                                            员工管理
                                        </el-menu-item>
                                        <el-menu-item  class="navLeftItemTitle menuItem "
                                                       index="1-3">
                                            <div class="gutterItem"></div>
                                            会员信息
                                        </el-menu-item>
                                    </div>
                                </el-submenu>
                             
                            </div>


                        </el-menu>
                    </el-col>
                    <el-col :xs="15" :sm="18" :md="19" :lg="20">
                        <div class="breadNav">
                            <el-breadcrumb class="breadNavBlock" separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>数据中心</el-breadcrumb-item>
                                <el-breadcrumb-item>站点数据</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                        <router-view></router-view>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: "Admin",
        data() {
            return {
                message: '这里是登录页首页',
                activeIndex: '1',
                activeIndex2: '1',
                url: "/imgs/logo300-1.png",
                isCollapse: false,
                opensNav:[]
            }
        },
        mounted() {
            /*
            jQuery查看页面元素使用:这里的jq版本不行，先用原生js
            添加class：$("标签名").attr("className","class值")
            删除class: $("标签名").removeClass("className")
             */
            console.log("进入后台管理页面，获取el-menu-item");
            let elMenuItem=document.getElementsByClassName("el-menu-item");
            for(let i=0;i<elMenuItem.length;i++){
                elMenuItem[i].style.paddingLeft="0";
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

11.页面效果

admin

admin导航

header头部导航

标签:
打赏 点赞(0)

文章来源：智云一二三科技

文章标题：web全栈：java微服务+vue+elemUI开发CMS1

文章地址：https://www.zhihuclub.com/196645.shtml

关于作者: 智云科技

相关文章

热门文章

1分享新浪图床上传接口源码

点赞(896) 阅读(59,829)

2PHP简单实现路由Route功能

点赞(1.11K) 阅读(35,943)

3Tideways、xhprof 和 xhgui 打造 PHP 非侵入式监控平台

点赞(322) 阅读(4,273)

4centos系统如何查看是否安装了mysql

点赞(495) 阅读(3,753)

5curl 工具简述

点赞(466) 阅读(2,960)
网站地图