• Spring cloud微服务安全实战-5-2前端页面改造



    创建一个新的maveb项目,做一个admin的管理界面

    用angular写前面的页面。
    先把dependcency引用引进来。

    前端的插件能帮我在springboot里面搭建出一个nodeJS的环境来。最近这里的引用可以插件最终的源代码。

    这是node.js的版本




    多出一个node的文件夹来。

    有了node环境以后 ,还需要npm的命令。新建一个文件

    文件就叫做npm,

    一会我们用这个命令来装angular。
    下面的是告诉它到哪去执行命令,实际上就是node/node_modules/npm/bin/npm-cli.js这个路径。到这去执行nom的命令。

    有了这个文件后,在文件这里右键


    目前是在is-admin这个目录下面。

    npm的版本是6.9

    下面去安装angular。安装angular cli脚手架。

    提示这个就算是下载完成了。上面可能会有一些警告,不用管。

    创建一个叫做ng的文件。



    告诉它执行ng这个命令 到下面这个路径下执行。


    刷新一下

    node的旁边多了个node_modules文件夹








    创建angular项目。css选择最原始的CSS

    刷新下,这里多了个aaa的目录。

    把里面的文件提到根目录下

    选择Skip All

    拷到这个src下,上面刚才给忽略掉了因为文件夹的冲突。

    这个目录可以删掉了。选择ok


    安装bootstrap3 然后jquery的版本。

    依赖的根目录下引入bootstrap.css






    可以理解为java的公用的import的文件。里面有很多的依赖。

    这是一个总的依赖的管理CodeMix

    编辑器内有语法提示 是因为安装了个插件


    数据绑定

    运行程序之前有几个地方要改,熟悉spring boot的人都知道这个resources下的文件在浏览器上访问是可以直接访问的到的。

    每次改了文件都需要编译,编译也是需要触发的。这里我们做一个热部署。
    --watch这行他就是在监控着我的源码的目录。一旦源码有变化就会自动去编译。编译后的静态文件,就放在刚才我们配置的地方。


    这样就是编译好了。

    比如修改标题。


    这边就会自动触发编译

    src/main/resources/static的目录下 就已经有了编译后的文件。






    is-admin的pom.xml相关目录下

    运行测试

    直接访问8080

    结束

  • 相关阅读:
    基于API函数的串口通信编程——理解(转)
    如何设置超时参数(串行通讯)
    注册热键——RegisterHotKey
    如何制作OEM包 (转帖)
    CreateThread函数创建线程
    WinCe6.0 播放语音问题
    C语言编写图形程序// http://lcrystal.spaces.live.com/blog/cns!13dfc6235bbfb72c!128.entry
    关于串口编程的读书笔记
    c++中内存管理
    MFC读取TXT文件,写入编辑框
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/11954163.html
Copyright © 2020-2023  润新知