java web开发（和vue联合开发）

Posted 2022-12-12 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        前面我们谈到了很多次vue，也说到了vue的很多优点。比如说，vue实现了mvc中全部v的功能，也就是view的部分。这样，后端开发就变得很简单，前后端之间只要实现json数据的传递就可以了。因为在之前，我们学习了vue，也学了idea下的webapp开发，今天正好可以一起来研究下，怎么把vue和servlet开发整合在一起调试。

1、创建vue工程

1.1 创建一个demo vue工程

D:\\github\\vue-element>vue init ./webpack_git demo

? Project name demo
? Project description A Vue.js project
? Author feixiaoxing <[e-mail]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "demo".

# Project initialization finished!
# ========================

To get started:

  cd demo
  npm install (or if using yarn: yarn)
  npm run dev

        因为这部分内容，之前已经涉及过，所以不打算重复了。要实现vue创建工程，有三个部分需要做好。第一，安装好node.js；第二，安装好vue-cli；第三，下载好webpack的模板。

1.2 利用npm安装好第三方模块

D:\\github\\vue-element>cd demo

D:\\github\\vue-element\\demo>npm install

1.3 运行网站，查看是否可以正常输出

D:\\github\\vue-element\\demo>npm run dev

1.4 如果网站正常输出，修改config下面的index.js文件

        将所有assetsPublicPath对应的‘/’修改为‘./’

1.5 生成dist文件

D:\\github\\vue-element\\demo>npm run build

2、创建java版Hello工程

2.1 基于IDEA和maven，创建基于maven-archetype-webapp的Hello工程

2.2 将之前vue生成的index.html和static目录文件，拷贝到src/main/webapp目录下

2.3 删除index.jsp文件，只留下index.html文件

2.4 配置好tomcat

        主要配置两个方面，一个是端口，一个是deployment。确认无误后，点击绿色三角按钮，如果我们可以看到如下的网页内容，那就代表说，配置是成功的。否则，就需要自己花点时间，找找具体失败的原因了，