后台页面第一天,实现登录(依据x-admin模板)

一、将x-admin模板下载保存并解压。

二、将全部文件选中,复制粘贴进后台模块的static文件夹下(相当于以前war形式部署的webapps文件夹)。

三、启动类所在的包内新建一个controller包,service包,entity包,service包内新建impl包。

四、在controller包中新建一个类,用于获取用户登录请求和获取用户信息请求(名字可以自定义),创建后在类上加上@RestController注解,告诉spring这是一个controller对象,而且方法返回结果都转化为json串。

五、在entity包中新建一个类,用于封装用户信息(暂时设定只有用户id,用户名,用户密码,登录信息),创建后在类上加上@Component注解,告诉spring这是一个entity对象,添加getset方法,实现序列化接口@Serializable并指定UID

六、在service包中新建一个接口,用于定义处理用户登录的方法

 七、在impl包中新建一个类实现这个接口,并加上@Service注解,告诉spring这是一个service对象

八、在service层添加login方法,并在实现类中实现方法(现在只是写死用户名和密码,没有通过dao层与数据库交互获取值,后期再填充)

九、在controller层注入对应service,用@Autowired自动注入,然后加入login方法,在其中获取对应属性名的值,交给service层处理

 

 十、同理,再新建一个接口,用于获取用户名(指暴露一个url给前端调用并返回前端期待的值),同样写死,后面再靠 cookie+session。

 

十一、打开static中的login.html

十二、检查表单中用户名输入框和密码输入框的name名是否正确和controller中方法内的属性名对应

十三、为登录页面写ajax请求登录功能,请求方法为post,url对应到controller的接口

十四、login.html导入login.js

十五、启动后台页面服务,验证登录请求

十六、输入错误的用户名和密码

十七、输入正确的用户名和密码,显示成功登录,并在提示信息消失时跳转到index.html页面

至此,前端发起ajax请求,由对应后端接口进行处理(未调取数据库记录)的一般流程已经演示完成。

posted @ 2018-11-06 15:00  momiji_jin  阅读(2736)  评论(16编辑  收藏  举报