技术栈:

        MyBatis,Maven,Axios,Vue.js,Tomcat,javaEE

虽然看上去技术栈很多,但是使用的都是最基础的东西,保证你看完这篇文章就可以自己写一些小项目了

本文只涉及快速上手,不包含深度讲解,如果想了解更多深度内容,可以去各大平台看一些讲解视频,这篇文章就不探讨了~


一、建立框架:

如果你使用上面那一套技术栈的话,那么你大概需要搭建这样一个框架

java往js文件中填充内容_java往js文件中填充内容

别急,如果你不知道怎么创建这个框架的话,可以直接去我的github/gitee上拉下来

ManageSystem-Basics [gitee]

ManageSystem-Basics [github]

java往js文件中填充内容_java_02

我已经把基本框架放在里面了,直接下载即可,如果可以的话,star一下喵~(蹭蹭


二、修改信息

1.先修改一下maven的配置坐标

pom.xml

java往js文件中填充内容_mybatis_03

修改完坐标别忘记更新maven哦

2.再去修改一下数据库配置信息

这个的作用是链接你的数据库

 src/main/resources/mybatis-config.xml

java往js文件中填充内容_mybatis_04


三、工作流

配置完成后,就可以开始着手写功能了

1.前端:

我给出的示例网页长这个样子

java往js文件中填充内容_java_05

下面给大家粗略的讲一下大概都是什么功能

(1) HTML

java往js文件中填充内容_mybatis_06

id=app包裹的部分说明它可以使用vue的

{{}}是插值表达式,里面可以放变量,展示在页面上

(2) 导包

java往js文件中填充内容_java往js文件中填充内容_07

导入vue.js和axios.js的包

(3) JS&AXIOS&VUE:

java往js文件中填充内容_vue.js_08

el:"#app" 指定范围 id为app

mounted:意思是在网页挂载完成后执行的代码。将代码放入里面会自动执行

methods:在页面中用到的所有函数都需要写到methods里面

axios:

        method:请求方式 常用get或post

        url:访问路径,可用来向sevrlet发送请求

        [data:] :(可选)在传输方式为post时,用来发送数据

        .then(resp=>{})  回调函数,里面是请求完成后执行的代码,resp为返回的数据,具体可用resp.data获取

data(): {return:{}} return里面放需要的变量,可以是对象

综合起来看,这段示例代码的意思就是用get向/user/HelloWorld发送请求并将返回值存入Str


2.后端

1.操作数据库:

  src/main/java/com/lonelySnow/mapper/UserMapper.java

java往js文件中填充内容_java往js文件中填充内容_09

简单SQL语句直接使用注解即可

2.创建接口:

src/main/java/com/lonelySnow/service/UserService.java

java往js文件中填充内容_java往js文件中填充内容_10

3.实现接口:

java往js文件中填充内容_mybatis_11

红框框住的部分不用改,直接用就可以 

mapper.方法名 即可调用刚才在usermapper中写的SQL

4.链接前端:

java往js文件中填充内容_java往js文件中填充内容_12

还是老规矩,不需要改红框代码,但是要把Str改为你上面的数据,如果没有返回值,请忽略

可以使用user.Service.方法名 来调用

如果你需要获取前端传来的数据,请用下面的方式获取 

java往js文件中填充内容_java_13

 第一行用于获取get请求的参数,只需要修改后面那串字符串即可

后两行用于获取post请求的参数,一般不需要修改


四、运行

因为我们在pom.xml里导入tomcat坐标了,我们直接可以使用maven运行

java往js文件中填充内容_java_14

这样就可以运行项目了。


五、使用项目:

我们写完这个项目之后,肯定想看一看运行起来是什么样子的,我们在运行之后会出现下面的代码

java往js文件中填充内容_vue.js_15

点击红框的那个链接,在浏览器中将其补全

java往js文件中填充内容_mybatis_16

java往js文件中填充内容_mybatis_17

可以看到,已经成功了


好的,你已经学会如何上手了,那么接下来,去写你自己的项目吧

如果你还是不知道项目该怎么写,可以去我的gitee项目中下载我写的网站demo(还在持续更新)

java往js文件中填充内容_web_18